CSS动画在Safari中不起作用

Question

我有一点 CSS3 动画，它在除 safari 之外的所有支持 CSS3 的浏览器中都能完美运行。是不是很奇怪？好的，这是我的代码：

这里有什么问题。

提前致谢。

CSS：

@-o-keyframes inner-circle {
  0% {transform:rotate(0deg);}
  5% {transform:rotate(0deg);}
  90% {transform:rotate(360deg);}
  100% {transform:rotate(360deg);}
}
@-moz-keyframes inner-circle {
  0% {transform:rotate(0deg);}
  5% {transform:rotate(0deg);}
  90% {transform:rotate(360deg);}
  100% {transform:rotate(360deg);}
}
@-webkit-keyframes inner-circle {
  0% {transform:rotate(0deg);}
  5% {transform:rotate(0deg);}
  90% {transform:rotate(360deg);}
  100% {transform:rotate(360deg);}
}
@-ms-keyframes inner-circle {
  0% {transform:rotate(0deg);}
  5% {transform:rotate(0deg);}
  90% {transform:rotate(360deg);}
  100% {transform:rotate(360deg);}
}
@keyframes inner-circle {
  0% {transform:rotate(0deg);}
  5% {transform:rotate(0deg);}
  90% {transform:rotate(360deg);}
  100% {transform:rotate(360deg);}
}

.text-bg2 {
  animation-name:inner-circle; 
  animation-duration:5s; 
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name:inner-circle; 
  -webkit-animation-duration:5s; 
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -o-animation-name:inner-circle; 
  -o-animation-duration:5s; 
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
  -moz-animation-name:inner-circle; 
  -moz-animation-duration:5s; 
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name:inner-circle; 
  -ms-animation-duration:5s; 
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
}

HTML：

<div class="text-bg2"><img src="img/text-bg.png"></div>

我在这里缺少什么？谢谢！

Answer 1

使用只需要添加供应商特定的 css tranfsorm 属性，即在您包含 transform 的任何地方（所有地方），添加两行 css，如下所示：

@-o-keyframes inner-circle {

    0% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg); /* added vendor specific css (IE) */
        -webkit-transform: rotate(0deg); /* added vendor specific css (Safari, Opera , Chrome) */
    }
    5% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);/* added vendor specific css (IE) */
        -webkit-transform: rotate(0deg);/* added vendor specific css (Safari, Opera , Chrome) */
    }
    90% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);/* added vendor specific css (IE) */
        -webkit-transform: rotate(360deg);/* added vendor specific css (Safari, Opera , Chrome) */
    }
    100% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);/* added vendor specific css (IE) */
        -webkit-transform: rotate(360deg);/* added vendor specific css (Safari, Opera , Chrome) */
    }
}

Answer 2

@-webkit-keyframes inner-circle {
  0% {transform:rotate(0deg);}
  5% {transform:rotate(0deg);}
  90% {transform:rotate(360deg);}
  100% {transform:rotate(360deg);}
}

仅在开头添加 -webkit- 不会改变 transform 也需要它的事实。您需要喜欢在括号内执行此操作。 例如：

  @-webkit-keyframes inner-circle {
      0% {-webkit-transform:rotate(0deg);}
      5% {-webkit-transform:rotate(0deg);}
      90% {-webkit-transform:rotate(360deg);}
      100% {-webkit-transform:rotate(360deg);}
    }

对所有其他人也这样做。

Answer 3

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

所以：

.text-bg2 {
  animation-name:inner-circle; 
  animation-duration:5s; 
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name:inner-circle; 
  -webkit-animation-duration:5s; 
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -o-animation-name:inner-circle; 
  -o-animation-duration:5s; 
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
  -moz-animation-name:inner-circle; 
  -moz-animation-duration:5s; 
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name:inner-circle; 
  -ms-animation-duration:5s; 
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
}

@-o-keyframes inner-circle {
  0% {transform:rotate(0deg);}
  5% {transform:rotate(0deg);}
  90% {transform:rotate(360deg);}
  100% {transform:rotate(360deg);}
}
@-moz-keyframes inner-circle {
  0% {transform:rotate(0deg);}
  5% {transform:rotate(0deg);}
  90% {transform:rotate(360deg);}
  100% {transform:rotate(360deg);}
}
@-webkit-keyframes inner-circle {
  0% {transform:rotate(0deg);}
  5% {transform:rotate(0deg);}
  90% {transform:rotate(360deg);}
  100% {transform:rotate(360deg);}
}
@-ms-keyframes inner-circle {
  0% {transform:rotate(0deg);}
  5% {transform:rotate(0deg);}
  90% {transform:rotate(360deg);}
  100% {transform:rotate(360deg);}
}
@keyframes inner-circle {
  0% {transform:rotate(0deg);}
  5% {transform:rotate(0deg);}
  90% {transform:rotate(360deg);}
  100% {transform:rotate(360deg);}
}