css - Safari Webkit 动画(旋转)不工作

Question

下午好。我在玩 webkit 动画，不知何故我无法让它在 Safari 中工作。动画在 IE 和 Firefox 中有效，但不知何故在 Safari (8.0.2) 中无效。

有人能发现任何错误吗？

如果有人能帮助我，我会很高兴。许多问候:)

.buttonmit1anikasten:hover{

    width:280px;
    height:274px;
    background-color: green;
    float: left;
    margin-top: 82px;
    margin-bottom: 0px;
    padding-bottom:0px;
    margin-left: 12px;
    margin-right: 0px;
    opacity:1.0;
    position:absolute;
    animation-name: spinning;
    -webkit-animation-name: spinning; 
    animation-duration: 3s;
    -webkit-animation-duration: 3s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes spinning {
  0%   {-webkit-transform: rotate(0deg);}

    50% {-webkit-transform: rotate(180deg);}

    100%   {-webkit-transform: rotate(360deg);}
  }

Answer 1

您缺少特定于 Safari 的关键帧定义。您还必须使用 @-webkit-keyframes spinning。您应该添加以下内容:

@-webkit-keyframes spinning {
    0% {-webkit-transform: rotate(0deg);}
    50% {-webkit-transform: rotate(180deg);}
    100% {-webkit-transform: rotate(360deg);}
}

并调整您之前的关键帧，删除-webkit-前缀:

@keyframes spinning {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(180deg);}
    100% {transform: rotate(360deg);}
}

在这里你可以找到我用一些简单的(编造的)HTML 做的 JSFiddle，所以你可以在那里测试它:http://jsfiddle.net/k289yy3x/

希望我能帮上忙。