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