30

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

HTML 

<div class="right">
    <div class="key-arm"><img src="images/landing/key-arm.png" alt="arm" /></div>
</div>

CSS 

.landing .board .right {
    width: 291px;
    height: 279px;
    background: url('../images/landing/key-pnl.png');
    bottom: 16px;
    right: 250px;
    position: absolute;
}
.landing .board .right .key-arm {
    position: absolute;
    left: 44px;
    top: 18px;
    width: 41px;
    height: 120px;
}



/*=== Key Arm Animation ===*/
@-webkit-keyframes keyarm {
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes keyarm {
    0% { -moz-transform: rotate(0deg); }
    5% { -moz-transform: rotate(-14deg); }
    10% { -moz-transform: rotate(0deg); }
}

@-ms-keyframes keyarm {
    0% { -ms-transform: rotate(0deg); }
    5% { -ms-transform: rotate(-14deg); }
    10% { -ms-transform: rotate(0deg); }
}

@-o-keyframes keyarm {
    0% { -o-transform: rotate(0deg); }
    5% { -o-transform: rotate(-14deg); }
    10% { -o-transform: rotate(0deg); }
}

@keyframes keyarm{
    0% { transform: rotate(0deg); }
    5% { transform: rotate(-14deg); }
    10% { transform: rotate(0deg); }
}


.right .key-arm{
    -webkit-transform-origin: 12px 105px;
       -moz-transform-origin: 12px 105px;  
        -ms-transform-origin: 12px 105px;  
         -o-transform-origin: 12px 105px;  
            transform-origin: 12px 105px;  

   -webkit-animation: keyarm 8s ease-in-out 0s infinite;
      -moz-animation: keyarm 8s ease-in-out 4s infinite;
       -ms-animation: keyarm 8s ease-in-out 4s infinite;
        -o-animation: keyarm 8s ease-in-out 4s infinite;
           animation: keyarm 8s ease-in-out 0s infinite;
}

好的，正如我所说，这在 Safari 中不起作用，没有任何动作。
此外，仍然且仅在 Safari 中，仅当您调整屏幕大小时才会显示键臂 div！它在 DOM 中，但由于某种原因它没有出现！
我究竟做错了什么？

谢谢
毛罗

更新：好的，从您的回答中我得知 Safari 4 不支持 @keyframes。这很奇怪，因为在同一页面上我有一个使用 @keyframes 工作的动画！

这是CSS代码：

.board .rays{
    background: url("../images/landing/rays.gif") no-repeat 0 0 red;
    height: 381px;
    left: 251px;
    opacity: 1;
    top: 80px;
    width: 408px;
    position: absolute;
}

.board .bottle{
    background: url("../images/landing/bottle.gif") no-repeat 0 0 lime;
    bottom: 30px;
    height: 405px;
    left: 276px;
    width: 357px;
    z-index: 1;
    position:absolute;
}

/*=== Rays Animation ===*/
@-webkit-keyframes rays{
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rays{
    0% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(360deg); }
}

.board .rays{
   -webkit-animation: rays 40s linear 0s infinite;
   -moz-animation: rays 40s linear 0s infinite;
   animation: rays 40s linear 0s infinite;
}

和html： 

<div class="board">
    <div class="rays"></div>
    <div class="bottle"></div>
</div>

在 jsFiddle 中自己尝试一下（如果你有 Safari 4），你会看到

4

4 回答 4

51

找到了解决方案。在 Safari 中，当您使用关键帧时，您需要使用整个百分比：

这不起作用： 

@-webkit-keyframes keyarm {
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
}

这会： 

@-webkit-keyframes keyarm {
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(0deg); }
}

不知道为什么，但这就是 Safari 的工作方式！:)

于 2012-02-24T12:51:59.417 回答
34

我在 Safari 6 中使用 CSS3 动画时遇到了问题，但在 Safari 4 (4.0.5) 中没有。

看来速记符号在 Safari 4 中不起作用。

所以这行不通：

-webkit-animation: rays 40s linear forwards;

但这会起作用：

-webkit-animation-name: rays;
-webkit-animation-duration: 40s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
于 2013-07-08T14:19:18.193 回答
10

在您尝试在将transform某些东西注入 DOM 后立即对其进行动画处理的情况下，我不得不添加一个非常短暂的延迟，如下所示：

animation: rays 40s linear 0.01s infinite;

于 2016-10-13T18:20:00.257 回答
-1 
@-webkit-keyframes { <- let this symbol to the same line
} - >

-webkit-这适用于带有变换和动画前缀的 iphone 3 ios 6.1.6

于 2015-12-01T05:19:32.163 回答