How to deal with animations?

Question

JavaScript

All in the context of the web.
How to figure it out? It is categorically incomprehensible what they do, how and why easeIn, easyOut and many dozens of other types of animations.
It is not clear how to achieve the desired effect. So I want to create a cast animation that I have in my head. Where to start creating it?
Or I got to the casino site - I see how beautifully the wheel of the slot machine rotates on canvas. How to make the same animation? It seems logically - only movement and slight blurring - but t nifga, it looks different, more "wretched" or something.
Is there any literature that describes all this? Starting with matrix transformations, ending with design features?

Answer 1

what do how and why do easeIn, easyOut and many dozens of other kinds of animations.

There are online services where you can play around with the "code" animation settings.
This is not from the topic "I want to learn how to tie shoelaces", this is a long time to learn in animation courses.
You should not have thoughts in your head, but frames. Learn to build shots like scenes in a movie,
they are not just taken and filmed, but they create layouts, descriptions. Draw a diagram of the movement, time ..
If beautiful, then this is a video created in a video editor.

Answer 2

Pro CSS3 Animation - Dudley Storey - December 2012
Physics for JavaScript Games, Animation, and Simulations with HTLM5 Canvas - Dev Ramtal and Adrian Dobre - May 2014
downloaded but not read yet, may be useful

Answer 3

Made a translation of an article on animations for beginners. From and to painted what for what. Live examples are right there in the text. You can copy and paste directly to your site.
devdocs.ru/verstka/css3-animations-for-beginners

Answer 4

Do not consider it rude, but did you try to read sources? (jquery and jqueru UI, for example, where about animate)
And api.jquery.com/animate is also written in quite simple language, isn't it?