Keyframe Animation

CSS animations allow you to gradually change an element from one style to another. Animations consist of two parts: 1) a style describing the CSS animation and 2) a set of keyframes that mark the start and end states of the animation’s style. With some creativity, many animations can be done entirely in CSS... without any JavaScript!

Some advantages of using CSS animations rather than JavaScript include:

• Simple to use and require no JavaScript knowledge.
• Much better performance, even under moderate system load.
• Allowing the browser to control the animation lets it optimize performance. For example, minimizing update frequency or pausing the animations running in tabs that aren’t open.

@keyframes

The @keyframes rule is like a timeline in CSS. It allows you to specify the style at a specific moment in time.

• If your animation runs smoothly from the start to the end, you can use the from and to values.
• If your animation varies from start to finish, like a bounce effect, use a percentage value (this is the value type our generator uses).

animation property

animation: name duration timing-function delay iteration-count direction fill-mode

name

@keyframes name

duration

Total length of time that the animation takes to complete one cycle.

timing-function

How an animation progresses through the duration of each cycle.

delay

Delay between the time the element is loaded and the beginning of the animation.

iteration-count

Number of times the animation will repeat, or infinite for looping animations.

direction

Whether or not the animation should alternate directions through the sequence or reset to the starting point.

fill-mode

How an animation applies styles to its target before and after its execution.