サイズ変更後にCSS vwとvhの値を再計算するには？

Question

CSS変換でvwとvhの値を使用しています。これはCSSアニメーションに実際のウィンドウ幅を使用させます。この場合、クラウドイメージは画面の左から右に移動します。

これは、CSSの読み込み後にウィンドウのサイズを変更した場合を除いて、どのウィンドウサイズでも正常に機能します。サイズ変更後にvwの値を再計算する方法はありますか？

transform：translateでは機能しないため、パーセンテージは使用できません。

cloud { 
    animation: cloudanimation 2s linear infinite; 
} 

@keyframes cloudanimation { 
    0% { 
    transform: translateX(10vw); 
    } 

    100% { 
    transform: translateX(90vw); 
    /* percentages don't work correctly with translate */ 
    /* transform : translateX(90%);*/ 
    } 
} 

Answer 1

アニメーションに相対値を渡すと、絶対値に変換されますが、サイズを変更すると更新されません。

解決策の1つは、サイズ変更イベントが発生したときにアニメーションを再開することです。 jQueryを使って

：

$(window).resize(function() { 
    //remove animation 
    $('div').removeClass('cloud') 

    //reflow width 
    let w = $('div').outerWidth(); 
    $('div').outerWidth(w); 

    // add animation class back 
    $('div').addClass('cloud') 
}); 

fiddle

CSSクラスの追加や削除、アニメーションを再起動するには、十分なhereが説明したように、あなたも幅をリフローする必要はありません。

---

あなたがinline-blockとして、あなたの要素を表示することができれば、これらは、アニメーション、fiddleの追加と削除せずに一貫振る舞うように見えます。

Answer 2

VWとVHは、ウィンドウのサイズ変更で自動的に再計算されます。

transform: translateX(10vw); 
transform: translateX(90vw); 

多分問題はどこか他にありますか？ ここをクリックFiddle