Week 4. CSS Transitions & Animations
In CSS, a transition occurs when an element changes from one state to another (like a hover effect), and the browser fills in that state change with a sequence of in-between frames. In other words, transitions are limited to two states: a beginning and an end state. Since transitions are limited to these two stages, they can lack the nuance of animations but at the same time be easier to use.

On the other hand, an animation can have more than two states. They are the more powerful alternative to transitions. Animations can be made up of as many in-between states as you like, and offer more control over how the states are animated. Animations achieve this by using sets of keyframes.

Where a transition only goes from A to B, an animation can go from A, B, C to D. Or any number of stages as needed.

Transition examples:

Animation examples:

Resources for drawing with CSS

Examples of drawing with CSS