How to recalculate css vw and vh values after resizing?

Question

I am using vw and vh values in my CSS transform. It causes the css animation to use the actual window width. In this case the cloud image moves from the left to the right of the screen.

This works fine for any window size, except when I resize the window after the css is loaded. Is there a way to recalculate the vw value after resizing?

I cannot use percentages because that doesn't work with 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

When passing relative values to animation these get converted to absolute values, but when you resize these don't get updated;

one solution is to restart animation when the resize event takes place;

with 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

to restart animation adding and removing the css class is not enough you also need to reflow width as explained here.

---

if you can display your element as inline-block these seem to behave consistently without adding and removing animation , fiddle.

Answer 2

VW and VH are automatically recalculated with window resize.

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

Maybe the problem is somewhere else? Check here Fiddle