Responsive CSS Animations

Most important aspects

For this side project I studied CSS animations. I was interested in working their responsiveness. Normally CSS animations for small objects happen in a given space and it is usually a small space. But... What would happen if we make that container flexible to the browser width? How should the behavior for the elements be managed? Usually these type of consrtaints have a solution with JS. My challenge was to solve it only with CSS.

Here are my two cases:

There are three main elements in this first animation: the stars, the moon bubbles and the waves. The first two are placed proportionally within the allocated canvas available. The challenging part for me was the interaction of the waves, not showing a break once the browser window is resized. The solution I found for horizontal interactions of this kind is using background: repeat-x, so that the images I am using for the waves could be repeated along the horizontal axis

For the second animation, I played with different delays and duration for each animation. The positioning of the icons is proportional here too

It was fun to work on them, I hope you have enjoyed it!