キーフレームアニメーションが同期していません

サーバからではなく、ローカルファイルシステムで正しく動作します。何らかの理由で同期が外れています。助けてくれてありがとう。 WebKitのプレフィックスが付いたベンダーのみ。クローム26.Demoでテスト：http://cssdesk.com/jjqKK キーフレームアニメーションが同期していません

HTML：

<ul class="slides"> 
    <li><img src="http://placehold.it/200x100" /><span class="caption">Image 1</span></li> 
    <li><img src="http://placehold.it/200x100" /><span class="caption">Image 2</span></li> 
    <li><img src="http://placehold.it/200x100" /><span class="caption">Image 3</span></li> 
</ul>

CSS：

ul.slides{ 
    position: relative; 
    background: #000; 
    height: 100px; 
    width: 200px; 
    padding: 0; 
} 
ul.slides li{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    height: inherit; 
    width: inherit; 
    padding: 0; 
    margin: 0; 
    -webkit-animation: slideshow 9s linear infinite; 
} 
ul.slides.clickpause:active li{ 
    -webkit-animation-play-state:paused; 
} 
ul.slides li:nth-child(1){ -webkit-animation-delay: 0s; } 
ul.slides li:nth-child(2){ -webkit-animation-delay: 3s; } 
ul.slides li:nth-child(3){ -webkit-animation-delay: 6s; } 
@-webkit-keyframes slideshow{ 
0%{ 
    opacity: 0; 
    z-index: 2; 
} 
3%{ 
    opacity: 1; 
} 
30%{ 
    opacity: 1; 
} 
33%{ 
    opacity: 0; 
} 
34%{ 
    z-index: 1; 
} 
100%{ 
    opacity: 0; 
} 
} 
ul.slides li img{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    padding: 0; 
    margin: 0 
} 
ul.slides li span{ 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    background: rgba(40, 40, 40, 0.8); 
    color: #FFF; 
    padding: 5px 
}

デモ：http://cssdesk.com/jjqKK

してくださいJavaScriptを使用していない答え。ありがとう！

出典

2013-04-07 Mooseman

あなたはアニメーションを開始する前に、それが点滅し "第三のスライドを意味しますか？ – Chris

私のChromeでよく見えます。多分、初めにフラッシュがあったとは言えません。 –

@Chrisいいえ、ここで同期していません。例えば、スライド1は3秒間を示し、スライド2は1秒未満を示す。スライド1が再び表示される前にスライド3の後に遅延があります。 – Mooseman

あなたのアニメーションは、必ずしも同時に開始するとは限りません。

私は負の遅れが物事を同期させることで本当にうまくいくことを発見しました。この手法では、各アニメーションは同時に読み込まれますが、一部の部分はで始まり、になります。 jsbin例をチェックアウト：例インライン追加するを編集し

http://jsbin.com/EreYIdE/2/edit

：

ul { background: #000; height: 100px; padding: 0; position: relative; width: 200px; } li { height: inherit; margin: 0; opacity: 0; padding: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: inherit; -webkit-animation: slideshow 9s linear infinite; animation: slideshow 9s linear infinite; } li:nth-child(1) { -webkit-animation-delay: -9s; animation-delay: -9s; } li:nth-child(2) { \t -webkit-animation-delay: -6s; animation-delay: -6s; } li:nth-child(3) { \t -webkit-animation-delay: -3s; animation-delay: -3s; } @-webkit-keyframes slideshow { 0% { opacity: 0; } 3% { opacity: 1; } 30% { opacity: 1; } 33% { opacity: 0; } 100% { opacity: 0; } } @keyframes slideshow { 0% { opacity: 0; } 3% { opacity: 1; } 30% { opacity: 1; } 33% { opacity: 0; } 100% { opacity: 0; } } img { margin: 0; padding: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } span { background: rgba(40, 40, 40, 0.8); color: #fff; padding: 5px; position: absolute; right: 0; bottom: 0; left: 0; }

<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <ul> <li> <img src="http://placehold.it/200x100"> Image 1 \t <li> <img src="http://placehold.it/200x100"> Image 2 \t <li> <img src="http://placehold.it/200x100"> Image 3 </ul> </body> </html>

出典

2014-01-17 00:02:18 helloworld

ここに、ありがとう！ – Mooseman

あなたはJavaScriptを使用してアニメーションのトリガーを追加する必要があります

Javascript demo

window.onload = function(){ }

またはjQuery demo

$(window).load(function(){})

CSS3アニメーションと移行など文書のロード直前にが開始します。

出典

2013-04-08 07:37:41

ここでのアイデアはJSフリーです。 – Mooseman

私が知る限り、これはCSSアニメーションを同期させる唯一の方法です。少なくともJSは非常に小さいです。唯一の他の選択肢は、CSSのキーフレームアニメーションの代わりに、クラスの追加/削除とトランジションの使用をさらに多く含むJSです。これはダウンボントに値するものではありません。ありがとう、アーマド。 –

こんにちは、あなたのデモでリンクが壊れました。あなたの例（コードのフルライン）、thxでさらに説明できますか？ –

キーフレームアニメーションが同期していません

答えて

関連する問題