在safari中不能使用CSS3animation
我有一些CSS3animation，在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('..http://img.dovov.comlanding/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中，只有调整屏幕大小时，键臂才会显示！ 它在DOM中，但由于某种原因它不出现！
我究竟做错了什么？
谢谢
毛罗
更新：好吧，从你的答案我得到的@keyframes不支持Safari 4.这很奇怪，因为在同一页上我有一个animation，使用@keyframes！
这里是CSS代码：
.board .rays{ background: url("..http://img.dovov.comlanding/rays.gif") no-repeat 0 0 red; height: 381px; left: 251px; opacity: 1; top: 80px; width: 408px; position: absolute; } .board .bottle{ background: url("..http://img.dovov.comlanding/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）中自己试试，你会看到
find解决scheme。 在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的工作方式！ 🙂
我在Safari 6中使用CSS3animation时遇到了麻烦，但在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;
在一旦注入到DOM中的情况下，您尝试对某些东西进行animationtransform时，我必须添加一个非常短暂的延迟，如下所示：
animation: rays 40s linear 0.01s infinite;
@-webkit-keyframes { <- let this symbol to the same line } - >
这适用于iPhone 3 ios 6.1.6，在转换和animation上使用-webkit-前缀
