Pure CSS Animations : A Walkthrough [no-library]

This is a walkthrough of what's possible to do animation-wise with only CSS.
It’s a good idea to reduce the use of third-party packages or modules, in order to keep a project light-weighted and stable.
That’s the reason why a developer might need to watch out for those pure CSS tricks that allows to do almost anything that's needed, and it's easy to implement in any web project.

---

• Keyframes Control

@keyframes my-animation-title {
  0% { transform: scale(1); }
  100% { transform: scale(1.3); }
}

Use the @keyframes at-rule controls to set different steps through time. Those steps will be displayed on a timeline based on the value in percentage before each set of properties.
You can set as many steps as you want.

in the example above, 0% and 100% can be replaced by from and to

To use it, declare the identifier in a css animation property, also as the duration.

---

• Animation property

animation: my-animation-title 1s; 

Those 2 values are sufficient to begin to see something moving but there's a lot more that's possible to set. This property is a shortend for 8 animation-related properties that are :

• <animation-name> corresponds to the @keyframes identifier.
• <animation-duration> is the time between the 0% and the 100% steps.
• <animation-timing-function> indicates the progress of an animation through time. Possible values will be linear, ease-in-out but also steps(3, jump-start). In that case, the animation will mark 3 stops, excluding the 0% step.
• <animation-delay>, expressed in seconds, can be either positive or negative. It corresponds to the delay before an animation starts, and a negative value here will cut off the start of the movement.
• <animation-iteration-count> is the number of times the sequence will be repeated. It's possible to either use a number or to use infinite keyword.
• <animation-direction>: by default, the animation is going from 0% to 100%. Here you can set a reverted direction or you can alternate between normal and revert by using alternate.
• <animation-fill-mode>: when the animation is finished, do you need to reset the initial position of your element or would you rather want it to stay at it's new state ? This is what can be set here, possible values are for example forwards or backwards.
• <animation-play-state> here, only 2 values are available: running or pause. Use pause to interrupt anytime while keeping current position.

There's no need to follow a certain order, just place values inline and the corresponding properties will be recognized.

You can use multiple animations for the same selector, by separating each group of values by a comma.

Here's a Sandbox where you can experiment everything listed above.
Have fun with it !

Banner Image: Etienne Jules MAREY, Cavalier Arabe