Published on
CSS animation concept preview

Some time ago I posted an example of the background image for multiple elements. This time I used the same ideas to create a nice concept of animation for two images. Similar effects usually use WebGL, and I wanted to check if it’s possible to recreate them with CSS. I used 25 elements, animating at the same time, but it’s still has a good performance. I didn’t expect this, really. It’s a good point to start a new series of CSS experiments. Follow me on CodePen to not miss them!

See the Pen CSS animation concept by Ivan Bogachev (@sfi0zy) on CodePen.

UPD: This demo has been featured in the “Best of CodePen #2/2021” by FreeFrontend:

Pet projects

Math slides
38  1 

The tool from my series of articles called "Math is not required for UI development". It creates slides with graphs and texts in the style of the school desk.

Promo Core preview
10  1 

Boilerplate for static promotional websites. Pug, LESS, PostCSS, ES6+, Gulp, Webpack, BrowserSync, ESLint, Stylelint, auto-generated docs...

Muilessium preview
16  3 

Simple UI framework. RSCSS, REM-based sizes, fluid typography and other nice ideas. This website is powered by it.