html - CSS 关键帧动画在 Safari 中不起作用

Question

我已经为一些元素(图像和按钮)制作了一个动画，使用不透明度淡入和淡出。它适用于所有浏览器，但 Safari 除外。当我尝试在 Safari 中运行它时，我的所有元素都具有 100% 的不透明度，看不到任何动画。

按钮元素的示例:

这是我的 HTML:

<div id = "ctaButton" class="animate-fadeButton">
</div>

还有我的 CSS:

    #ctaButton{
        position:absolute;
        margin: auto;
        left: 26%;
        top:70%;
        padding:10px;  background: #CCC;
        background-color: rgba(255,131,15,0.5);

    }

@keyframes fadeButton {
      0%   { opacity:0; }
      25%   { opacity:0; }
      35%  { opacity:1; }
      90% { opacity:1; }
      100% { opacity:0; }
      animation-timing-function: linear;
    }
    @-o-keyframes fadeButton{
      0%   { opacity:0; }
      25%   { opacity:0; }
      35%  { opacity:1; }
      90% { opacity:1; }
      100% { opacity:0; }
      animation-timing-function: linear;
    }
    @-moz-keyframes fadeButton{
      0%   { opacity:0; }
      25%   { opacity:0; }
      35%  { opacity:1; }
      90% { opacity:1; }
      100% { opacity:0; }
      animation-timing-function: linear;
    }
    @-webkit-keyframes fadeButton{
      0%   { opacity:0; }
      25%   { opacity:0; }
      35%  { opacity:1; }
      90% { opacity:1; }
      100% { opacity:0; }
      -webkit-animation-timing-function: linear;
    }
    .animate-fadeButton {
       -webkit-animation: fadeButton 15s infinite;
       -moz-animation: fadeButton 15s infinite;
       -o-animation: fadeButton 15s infinite;
        animation: fadeButton 15s infinite; 
    }

Answer 1

你需要在关键帧动画之前而不是之后设置动画名称和时间

CSS

#ctaButton {
  position: absolute;
  margin: auto;
  left: 26%;
  top: 70%;
  padding: 10px;
  background: #CCC;
  background-color: rgba(255, 131, 15, 0.5);
}

.animate-fadeButton {
  -webkit-animation: fadeButton 15s infinite;
  -moz-animation: fadeButton 15s infinite;
  -o-animation: fadeButton 15s infinite;
  animation: fadeButton 15s infinite;
}

@keyframes fadeButton {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
  animation-timing-function: linear;
}

@-o-keyframes fadeButton {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
  animation-timing-function: linear;
}

@-moz-keyframes fadeButton {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
  animation-timing-function: linear;
}

@-webkit-keyframes fadeButton {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
  -webkit-animation-timing-function: linear;
}