CSS动画在Safari中不起作用

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

这里有什么问题

提前谢谢

CSS:

HTML:

---

我错过了什么？谢谢

使用只需添加特定于供应商的css TransfForm属性，即，无论您在何处（所有位置）包含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) */
    }
}

仅在开始时添加-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);}
    }

---

对所有其他人也这样做

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

因此：

@-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) */
    }
}

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

  @-webkit-keyframes inner-circle {
      0% {-webkit-transform:rotate(0deg);}
      5% {-webkit-transform:rotate(0deg);}
      90% {-webkit-transform:rotate(360deg);}
      100% {-webkit-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;
}

@-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);}
}