私はサファリを除くCSS3をサポートするすべてのブラウザで完全に動作するCSS3アニメーションを少し持っています。奇妙じゃないですか? Okここに私のコードがあります:
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にありますが、何らかの理由で表示されません!
何が間違っていますか?
ありがとう
マウロ
更新:Okあなたの答えから、@ keyframesはSafari 4ではサポートされていません。同じページに@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を使用している場合)で試してみてください。
ソリューションを見つけました。 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 3(4.0.5)ではなく、Safari 6で動作するCSS3アニメーションに問題がありました。
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に挿入されるとすぐにtransform
をアニメーション化しようとする状況では、次のように非常に短い遅延を追加する必要がありました。
animation: rays 40s linear 0.01s infinite;
@-webkit-keyframes { <- let this symbol to the same line
} - >
これは、iphone 3 ios 6.1.6で-webkit-
変換およびアニメーションのプレフィックス