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

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

希望我能提供帮助。

Safari Webkit动画（旋转）不起作用

1 个答案: