CSSトランジション/トランスフォーム - Google Chromeのブラウザで「shaky」画像が表示される

Question

最近、私は「不安定な」の画面がCSSの遷移によって発生している可能性が最も高いです。実際にはChromeブラウザ（おそらくSafariでも一部のpplでも報告されています）でのみ発生します。 どのように私はそれが滑らかに見えるようにすることができますか？ また、奇妙な白いブロックが数回現れることがあります。これは、トランジションを適用する前に発生していないため、ページが新しくロードされた後に1〜2回発生します。あなたが起こっている正確に何を見ることができるように

はここのリンクです：トランジションのhttps://vimeo.com/198493320

CSSコード：

.heroEffects .bg { 
    transform: scale(1); 
    -webkit-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78); 
    -moz-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78); 
    box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78); 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 2; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 
.bgimg { 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    position: absolute; 
    background-repeat: no-repeat; 
    background-position: center center; 
    transform: scale(1); 
    overflow: hidden; 
    -webkit-box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85); 
    -moz-box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85); 
    box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85); 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background-image: url("../img/gallery/slonecz.jpg"); 
    animation-name: backgroundchangeFadeInOut; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
    animation-duration: 10s; 
    -webkit-animation-name: backgroundchangeFadeInOut; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 15s; 
} 

Answer 1

実は、私はちょうど作るためにいくつかの方法を見つけましたそれは正常に動作します。 まず、-webkit-transform-style：preserve-3dを追加します。ちらつきの要素へのルールは、私が少しでも少しだけ機能するようにします。それでも私の場合は、後で完全には機能しませんでした（ソース：https://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit）。

実際に私のために働いた何を、15秒に10秒からアニメーション-期間ルールを増やすことで、代わりに私は、次のを入れて3段階の移行の：

@keyframes backgroundchangeFadeInOut { 
    0% { 
     background-image: url("../img/gallery/slonecz.jpg"); 
    } 
    15% { 
     background-image: url("../img/gallery/slonecz.jpg"); 
    } 
    30% { 
     background-image: url("../img/gallery/slonecz.jpg"); 
    } 
    45% { 
     background-image: url("../img/gallery/slonecz.jpg"); 
    } 
    50% { 
     background-image: url("../img/gallery/motyl.jpg"); 
    } 
    65% { 
     background-image: url("../img/gallery/motyl.jpg"); 
    } 
    80% { 
     background-image: url("../img/gallery/motyl.jpg"); 
    } 
    95% { 
     background-image: url("../img/gallery/motyl.jpg"); 
    } 
    100% { 
     background-image: url("../img/gallery/slonecz.jpg"); 
    } 
} 

は、単一遷移撮影のように思えます多くの時間は、ブラウザのメモリに障害とちらつきを引き起こします。クイックトランジションとトランジションの間のオリジナル画像の表示は、私にはうまくいきます。そのような問題を抱えている誰かがこれをチェックして、マルチキャストソリューションであるかどうかを確認することを願っています。私はそれを解決する別の方法を考え出すまで

はまた、何らかの理由で現れて体であるように思われた白いブロックの場合には、一時的には0に身体の背景の不透明度を変更しました。