簡単なアニメーションがあります(この例ではSafariのみ):
h1 {
-webkit-animation: moveDown 1s ease-in-out;
}
@-webkit-keyframes moveDown {
0% {-webkit-transform: translateY(-20px); opacity: 0;}
100% {-webkit-transform: translateY(0px); opacity: 1;}
}
最新のSafari(5.1.5)では、問題なく動作します。
しかし、偶然、古いSafari(5.0.6)で例を表示しても、何も表示されませんでした。h1はなくなりました。
回転しないものを追加してイーザーをトリガーする(不透明度とアニメーションが機能する):
@-webkit-keyframes moveDown {
0% {-webkit-transform: translateY(-20px) rotate(0deg); opacity: 0;}
100% {-webkit-transform: translateY(0px) rotate(0deg); opacity: 1;}
}
または1%から開始します(不透明度は機能しませんが、アニメーション):
@-webkit-keyframes moveUp{
1% {-webkit-transform: translateY(-20px); opacity: 0;}
100% {-webkit-transform: translateY(0px); opacity: 1;}
}
それは再び働いた。
これは今私に2つの深刻な質問につながります:
- 最初の例で私が間違ったことはありますか?
- 古いバージョンのSafariには、別の方法で処理する必要のある既知のバグがありますか?
原因:
サポートされていないブラウザでアニメーションを表示できなくてもかまいませんが(これは素晴らしいアドオンです)、アニメーション要素が表示されなくなったときは大胆にわかりません。
どうすれば、アニメーションをアドオンとして心配せずに使用できるでしょうか。
誰かがフィドルを求めたら:私はそれを再現してみました。しかし、もう1つ興味深いことがあります。まったく同じコードは、jsfiddleの古いSafariでは効果がありません。また、それはアニメートしたり消えたりしません。
編集:
h1が元のコードで消えていない(再構築できません)が、アニメーションイーザーを実行していないことがわかります。説明されているトリガーの1つでのみ機能します。
JS-FIDDLE: