CSS3 Animations

Previous Page Next Page

Creating CSS3 Animations

In the previous section, you learned about simple animations such as transitioning a property from one value to another using CSS3 transitions. However, transitions offer limited control over the animation's progression over time.

CSS3 animations take it a step further by providing keyframe-based animations, allowing you to define changes in CSS properties over time through a series of keyframes, similar to flash animations. Creating CSS animations involves two steps, as illustrated below:

The first step is to define individual keyframes and name an animation with a keyframes declaration.
The second step involves referencing the keyframes by name using the animation-name property, along with specifying animation-duration and other optional animation properties to control the animation's behavior.

However, it's not mandatory to define the keyframes rules before referencing or applying them. The following example demonstrates how to animate a <div> box horizontally from one position to another using CSS3 animations.

Example

Give it a try »

.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: moveit;
-webkit-animation-duration: 2s;
/* Standard syntax */
animation-name: moveit;
animation-duration: 2s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}

/* Standard syntax */
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}

To trigger an animation, you must specify a minimum of two properties: animation-name and animation-duration (with a duration greater than 0). However, all other animation properties are optional, as their default values allow animations to occur.

Note: Not every CSS property can undergo animation. Typically, any CSS property that accepts numerical, length, percentage, or color values can be animated.

Defining Keyframes

Keyframes are used to specify property values at various stages of an animation. They are specified using a specialized CSS at-rule called @keyframes. The keyframe selector in a keyframe style rule starts with a percentage (%) or the keywords from (equivalent to 0%) or to (equivalent to 100%). This selector determines where a keyframe is positioned along the animation's duration.

Percentages indicate a segment of the animation duration; for instance, 0% signifies the animation's beginning, 100% denotes its conclusion, and 50% represents the midpoint. For a 2-second animation, a 50% keyframe occurs at 1 second.

Example

Give it a try »

.box {
width: 50px;
height: 50px;
margin: 100px;
background: red;
position: relative;
left: 0;
/* Chrome, Safari, Opera */
-webkit-animation-name: shakeit;
-webkit-animation-duration: 2s;
/* Standard syntax */
animation-name: shakeit;
animation-duration: 2s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes shakeit {
12.5% {left: -50px;}
25% {left: 50px;}
37.5% {left: -25px;}
50% {left: 25px;}
62.5% {left: -10px;}
75% {left: 10px;}
}

/* Standard syntax */
@keyframes shakeit {
12.5% {left: -50px;}
25% {left: 50px;}
37.5% {left: -25px;}
50% {left: 25px;}
62.5% {left: -10px;}
75% {left: 10px;}
}

Animation Shorthand Property

While there are numerous properties to consider when creating animations, it's possible to specify all animation properties in a single property to reduce code length.

The animation property serves as a shorthand for setting all individual animation properties in the specified order. For example:

Example

Try this code »

.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation: repeatit 2s linear 0s infinite alternate;
/* Standard syntax */
animation: repeatit 2s linear 0s infinite alternate;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes repeatit {
from {left: 0;}
to {left: 50%;}
}

/* Standard syntax */
@keyframes repeatit {
from {left: 0;}
to {left: 50%;}
}

Note: If a value is missing or not specified, the property will default to its default value. For instance, if animation-duration is not provided, the animation won't occur because its default duration is 0.

CSS3 Animation Properties.

Below table is a brief overview of all the properties related to animation.

Property	Description
`animation`	A shorthand property for setting all the animation properties in single declaration.
`animation-name`	Specifies the name of `@keyframes` defined animations that should be applied to the selected element.
`animation-duration`	Specifies how many seconds or milliseconds that an animation takes to complete one cycle of the animation.
`animation-timing-function`	Specifies how the animation will progress over the duration of each cycle i.e. the easing functions.
`animation-delay`	Specifies when the animation will start.
`animation-iteration-count`	Specifies the number of times an animation cycle should be played before stopping.
`animation-direction`	Specifies whether or not the animation should play in reverse on alternate cycles.
`animation-fill-mode`	Specifies how a CSS animation should apply styles to its target before and after it is executing.
`animation-play-state`	Specifies whether the animation is running or paused.
`@keyframes`	Specifies the values for the animating properties at various points during the animation.

Previous Page Next Page