This post is supposed to be a beginners introduction to CSS 3 animations. There are two ways for animation in CSS 3, animations and transitions.
Differences between Animations and Transitions
This article sums it up nicely: https://www.peachpit.com/articles/article.aspx?p=2300569&seqNum=2
In general transitions are defined by a start and an end state. Animations can have an arbitrary amount or keyframes in between a start and a end state. Transitions are therefore suited for simpler use-cases, whereas animations are used when the requirement is complex.
Animations
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
The main use-case for animations is
For animations, a trigger is optional. A animation can start without a trigger for example right after the page loads.
Animations can be created via .css files or via the element.animate() javascript WebAPI (https://developer.mozilla.org/en-US/docs/Web/API/Element/animate).
Transitions
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
The main use-case for transitions is highlighting items such as navigation elements on hover. Instead of instantly switching the background color of such a navigation element to a darker shade, the transition can smoothly transition the color to the darker shade which gives the page a more relaxed and more organic feel.
A transition needs a trigger to run. This trigger can be the change of a CSS property or some JavaScript.
Transitions are added to CSS classes. A transition lists the properties of the same CSS class, that should be changed in a smooth animation. A animation always need a new value for a property so that a property can be animated as it transitions from the current value to the new value. The new value is not defined by the transition, in other words is not predefined. When a property, that is defined in the list of transitions, changes either by adding or removing a css class or using javascript, then the transition is triggered and will be applied so that the value is smoothly interpolated between the current and the new value.
Transitions are controlled using the transition-properties inside a CSS class. The transition properties are: transition-property, transition-duration, transition-timing-function and transition-delay.
A shorthand notation is available that combines all properties above into a single line: transition: <property> <duration> <timing-function> <delay>;