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

并调整您之前的 keyframes 删除 -webkit- 前缀：

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

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

希望能帮到你。

Safari Webkit 动画（旋转）不工作

Safari Webkit animation (Rotation) not working

css

safari

animation

webkit