Chapter 7
In this chapter I got to look more into CSS transitions and animations. Although they do have a lot of similarities. They both visualize CSS property changes and can both set timing functions to alter the rate of going from a one property value to another. Animations and transitions show their differences when it comes to how you trigger them to play, whether they loop easily, or how complicated of a transition you can define. The examples embedded below will show a major difference between them and it is how you trigger them to start playing. A transition only plays as a reaction to a CSS property value that has changed. As long as the computed value is different than what it recognizes, the transition starts firing. An animation don’t require any explicit triggering. Once you define the animation, it will start playing automatically. You can control the behavior of the animation by setting the animation-play-state property to running or paused.
Transition Example:
Animation Example: