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 に答える