Introduction to CSS Animations

CSS animations are more complex than CSS transitions. We only have the start state and the end state with CSS transitions. For example, we can start with the red background color and finish with the orange background color.

However, we cannot affect the actual implementation of the transition other than the duration and the easing. We cannot, for example, say that we want to have an in-between state where we’ll transition from red to green, then from green to orange.

Additionally, a transition will simply rewind to its original state on mouse out. There’s no way to affect that default behavior.