3

簡単なアニメーションがあります(この例では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つの深刻な質問につながります:

  1. 最初の例で私が間違ったことはありますか?
  2. 古いバージョンのSafariには、別の方法で処理する必要のある既知のバグがありますか?

原因:

サポートされていないブラウザでアニメーションを表示できなくてもかまいませんが(これは素晴らしいアドオンです)、アニメーション要素が表示されなくなったときは大胆にわかりません。

どうすれば、アニメーションをアドオンとして心配せずに使用できるでしょうか。

誰かがフィドルを求めたら:私はそれを再現してみました。しかし、もう1つ興味深いことがあります。まったく同じコードは、jsfiddleの古いSafariでは効果がありません。また、それはアニメートしたり消えたりしません。

編集:

h1が元のコードで消えていない(再構築できません)が、アニメーションイーザーを実行していないことがわかります。説明されているトリガーの1つでのみ機能します。

JS-FIDDLE:

ここでは、2つの例を使ったフィドルです。

4

1 に答える 1

2

古いバージョンのSafariは手元にありませんが、古いバージョンのアニメーションで遊んだことを思い出し、これらのタイプのバグに遭遇しました。私はセレクターに「終了状態」を置くことによってそれらを回避しました、例えばp {opacity: 1} http://jsfiddle.net/pkFaT/

于 2012-06-07T15:38:21.120 に答える