5

CSS3 アニメーションを機能させたいと考えています。IE9 以前を除くすべての主要なブラウザーで正常に動作します (驚くことではありません)。それでは、これ以上苦労することなく、CSS を次に示します。

#grosse_photo {
    /*...*/
    -webkit-animation: photoFade 12s infinite;
    -moz-animation:photoFade 12s infinite;
    -ms-animation: photoFade 12s infinite;
    animation-iteration-count:1;
    -moz-animation-iteration-count:1;
    -webkit-animation-iteration-count:1;
    -o-animation-iteration-count:1;
}
    @-webkit-keyframes photoFade {
        0%   { opacity: 0.0; }
        100% { opacity: 1.0; }
    }
    @-moz-keyframes photoFade {
        0%   { opacity: 0.0; }
        100% { opacity: 1.0; }
    }
    @-o-keyframes photoFade {
        0%   { opacity: 0.0; }
        100% { opacity: 1.0; }
    }
    @keyframes photoFadee {
        0%   { opacity: 0.0; }
        100% { opacity: 1.0; }
    }

-msのように反応するだろうと思ってプレフィックスを使用しました-webkitが、明らかに IE (lte 9) は連携しませんでした。

スライドインする要素も必要ですが、IE が連携しないため、 modernizr以外の明白なポリフィルを忘れていると思います。

最適ではありませんが、多くの人が jQuery の代替手段を参照しているのを見てきましたが、さまざまな時間と速度でさまざまなアニメーションを可能にするスニペットをまだ探しています。

4

2 に答える 2

2

アニメーション用の直接的なポリフィルはないと思います.javascriptによるアニメーションコマンドを導入していません.

そのためには、jquery animate() に行くか、これを試すことができ ます。

トランジション フォールバックが必要な場合は、 https ://github.com/addyosmani/css3-transition-fallbacks を試すことができます。

于 2013-09-27T04:48:12.820 に答える