User:Muchos/Snippets/How Animation works

Resources
Fundamentals of CSS Animation, developer.mozilla.org

Core idea
We need 4 ingredients:
 * 1) A page element.
 * 2) A property of that element to animate.
 * 3) Some CSS associated to that element for setting up the animation.
 * 4) Some CSS for describing the animation itself.

Let's imagine we want to make collapsible elements will expand smoothly. Our ingredients are:
 * 1)   as the page element.
 * 2) Opacity as the property to animate.
 * 3) animation-duration as a value to make it smooth.
 * 4) Keyframes:  keyframes contain the animation itself (from a state to another). They are associated to a keyword (we can choose anything). That keyword is actually the last value of our animation property.

So here is how it will look:

Note
Not every properties are animatable. Please refer to the animation type of a property on your favourite CSS resources.