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 on habr.com 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 different “impossible” cases and what methods of their creation should be inspected when your mastering your skills.
Looking for a step-to-step tutorial without mathematics?
Check out my article about WebGL shaders with examples adapted especially for UI developers (in Russian)!