CSS Animations and Keyframes
Keyframe selectors
from - starting state to - ending state
Advantages of CSS animations
1. No JavaScript code required 2. Less load on the computer 3. More efficient control and stopping of animations
Keyframe list
Contains keyframes or properties and values to be animated
@keyframes rule
Defines a CSS animation's behavior and contains a keyframe list
0%
Equivalent to 'from' keyframe
100%
Equivalent to 'to' keyframe
50%
Indicates the animation state at the halfway point
animation-duration property
Length of the animation in seconds (s) or milliseconds (ms)
animation-name property
Names the keyframe list associated with the animation
CSS animation
Transforms an element's styles over a set time period
Percentage keyframes
Used to specify keyframes at various points during the animation
