CSS Animations

CSS allows animation of HTML elements without using JavaScript!

In this chapter, you will learn about the following CSS animation properties:

• @keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation

What are CSS Animations?

An animation lets an element gradually change from one style to another.

You can change as many CSS properties you want, as many times as you want.

To use CSS animation, you must first specify some keyframes for the animation.

Keyframes hold what styles the element will have at certain times.

The @keyframes Rule

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.

To get an animation to work, you must bind the animation to an element.

The following example applies the "example" animation to a <div> element. The animation runs for 4 seconds and gradually changes the background color of the <div> from red to yellow.

Output->:

Understanding animation-duration and Keyframes with Percentages

Note: The animation-duration property defines how long an animation should take to complete. If this property is not specified, the animation will not run, because its default value is 0s (0 seconds).

In the example above, we defined the animation using the keywords from and to, which are equivalent to 0% (start) and 100% (end).

You can also use percentage values instead of just from and to. This allows you to define multiple style changes at different stages of the animation.

The following example demonstrates changing the background color of a <div> element at 25%, 50%, and 100% of the animation:

Output->:

The following example will change both the background-color and the position of the

element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete:

Output->:

Delay an Animation

The animation-delay property specifies a delay for the start of an animation.

The following example has a 2 seconds delay before starting the animation:

Output->:

Set How Many Times an Animation Should Run

The animation-iteration-count property specifies the number of times an animation should run.

The following example will run the animation 3 times before it stops:

Output->:

Run Animation in Reverse Direction or Alternate Cycles

The animation-direction property specifies whether an animation should play forwards, backwards, or alternate between the two.

This property can take the following values:

• normal – The animation runs forward (default behavior).
• reverse – The animation runs in reverse (backwards).
• alternate – The animation runs forward first, then backward in the next cycle.
• alternate-reverse – The animation runs backward first, then forward in the next cycle.

The following example demonstrates how to run an animation in reverse direction (backwards):

Output->:

The following example uses the value "alternate-reverse" to make the animation run backwards first, then forwards:

Output->:

Specify the Speed Curve of the Animation

The animation-timing-function property defines the speed curve of the animation — how the animation progresses over time.

This property can take the following values:

• ease – Starts slowly, speeds up, then slows down again (default).
• linear – Maintains a constant speed from start to end.
• ease-in – Starts slowly and then speeds up.
• ease-out – Starts quickly and slows down at the end.
• ease-in-out – Slow start and slow end.
• cubic-bezier(n,n,n,n) – Allows custom speed curves using a cubic-bezier function.

The example below demonstrates different animation speed curves in action:

Output:

Specify the Fill-Mode for an Animation

By default, CSS animations do not affect an element before the first keyframe or after the last keyframe is played. The animation-fill-mode property allows you to change this behavior.

The animation-fill-mode property defines the styles that should be applied to the element when the animation is not running — either before it starts, after it ends, or both.

This property can take the following values:

• none – Default value. No styles are applied before or after the animation runs.
• forwards – The element retains the styles set by the last keyframe after the animation ends.
• backwards – The element applies the styles from the first keyframe during the animation-delay period.
• both – Combines both forwards and backwards, extending styles before and after the animation.

The example below allows the <div> element to retain the styles defined in the last keyframe after the animation finishes.

Output:

Animation Shorthand Property

The following example demonstrates how to use the animation shorthand property, which combines six individual animation properties into a single line.

Output: