Ivan Bogachev

Creative frontend developer



Mastering CSS animations

Mastering CSS animations

Most of young frontend developers don’t know how to use CSS animations. I know, they say that they read docs on MDN or had been practicing with “fadeIn”, “fadeOut” animations and so on. But if you give them a really complicated animation, they can’t transform it into the code. They don’t even understand how to start. Sometimes they say that it’s impossible to create one or another animation. I assume it’s because they have mental blocks which are saying what they can do with CSS and what they can’t. So, I wrote an article to break these mental blocks. I got a number of examples from CodePen (some of them are mine, some are just popular examples from other authors) and explain the things inside them. I showed how to use CSS animations in various “impossible” cases and what methods of their creation should be inspected when your mastering your skills.