2

次のようなものを取得しました。これは、2 つの画像間でクロスフェードする CSS アニメーションです。

HTML

<div id="bg">
    <img src="bg_01.jpg">
    <img src="bg_02.jpg">
</div>

CSS

body {
    background: black;
    overflow-y: hidden;
}
#bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
img {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
img:last-child {
    -webkit-animation: test 30s infinite alternate;
}
@-webkit-keyframes test {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

また、定期的にアニメーションのオンとオフを切り替える、次のような JavaScript スニペットがあります。

JavaScript

var state = 'running';

setInterval(function() {
    $('img:last-child').css({
        '-webkit-animation-play-state': state
    });

    state === 'running' ? state = 'paused' : state = 'running';
}, 1000);

問題は、アニメーションが再開されたとき (「一時停止」 -> 「実行中」) に表示の不具合が発生する可能性があることです。この可能性は、ページを実行しているデバイスの種類によって異なります。

最先端のマシンでページを実行している場合、物事は非常にスムーズに見えます。ただし、別のブラウザー タブに切り替えてから元に戻すと、アニメーションがアニメーションの途中から最初のフレームに明らかにジャンプして戻る可能性があります (img:last-child不透明度が突然 1 に戻ります) 。そして新たに始める。

一方、弱いデバイスに対して実行している場合は、ブラウザのタブを切り替えなくてもグリッチを確認できます: アニメーションが再開するたびに、img:last-childの不透明度が一時的に 1 に設定され、視覚的に「出現」するちらつきの瞬間があります。 、アニメーションが最後の適切な状態からピックアップして続行する前に。

これは単に WebKit のバグであり、回避することはできませんか?それとも、最初のフレームのこの厄介なちらつきを処理できるようにコードを微調整するトリッキーな方法はありますか?

4

1 に答える 1

0

Java スクリプトで条件値を変更します。再生状態を使用しないでください。タイムアウト 1000秒でのみ一時停止状態を使用します...

于 2013-07-18T09:59:18.430 に答える