Utilizing vw and vh values in my CSS transform has resulted in the cloud image moving smoothly across the screen, from left to right, based on the actual window width.
While this works well for various window sizes initially, I have encountered an issue when resizing the window after the CSS has been loaded. Is there a way to dynamically recalculate the vw value post-resize?
Unfortunately, percentages are not a viable solution as they do not interact effectively 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%);*/
}
}