Question

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

这里有什么问题。

提前感谢。

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>

我在这里缺少什么？ THX！

Answer 1

使用只需要添加供应商特定的css tranfsorm属性，即你所包含的任何地方（所有地方）变换，添加两行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);}
}

CSS动画在Safari中不起作用

3 个答案: