Read 14a in 201
## Transitions & Animations
- With CSS3 transitions you have the potential to alter the appearance and behavior of an element whenever a state change occurs, such as when it is hovered over, focused on, active, or targeted.
- As mentioned, for a transition to take place, an element must have a change in state, and different styles must be identified for each state. The easiest way for determining styles for different states is by using the :hover, :focus, :active, and :target pseudo-classes.
- The animation-fill-mode property identifies how an element should be styled either before, after, or before and after an animation is run. The animation-fill-mode property accepts four keyword values, including none, forwards, backwards, and both.
- The backwards value will apply the styles within the first specified keyframe as soon as being identified, before the animation has been run. This does include applying those styles during any time that may be set within an animation delay. The backwards value may also be affected by the animation-direction property value.
- Fade in effects are coded in two steps: first, you set the initial state; next, you set the change, for example on hover
- To grow an element, you used to have to use its width and height, or its padding. But now we can use CSS3’s transform to enlarge.
- A really popular effect at the moment is transitioning a square element into a round one
- ghost button; a button with no background and a heavy border.