CSS3 Animations
The CSS3 animations feature allows you to create keyframe animations.
Creating CSS3 Animations
In the previous chapter you’ve seen how to do simple animations like animating a property from one value to another via CSS3 transitions feature. However, the CSS3 transitions provide little control on how the animation progresses over time.
The CSS3 animations take it a step further with keyframe-based animations that allow you to specify the changes in CSS properties over time as a set of keyframes, like flash animations. Creating CSS animations is a two step process, as shown in the example below:
- The first step of building a CSS animation is to defining individual keyframes and naming an animation with a keyframes declaration.
- The second step is referencing the keyframes by name using the
animation-name
property as well as addinganimation-duration
and other optional animation properties to control the animation’s behavior.
However, it is not necessary to define the keyframes rules before referencing or applying it. The following example will show you how to animate a <div>
box horizontally from one position to another using the CSS3 animation feature.
Example
.box {
margin: 50px;
width:153px;
height:103px;
background: url("/examples/images/tortoise-transparent.png") no-repeat;
position: relative;
animation-name: moveit;
animation-duration: 2s;
}
/* Standard syntax */
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
You must specify at least two properties animation-name
and the animation-duration
(greater than 0), to make the animation occur. However, all the other animation properties are optional, as their default values don’t prevent an animation from happening.
Note: Not all CSS properties are animatable. In general, any CSS property that accepts values that are numbers, lengths, percentages, or colors is animatable.
Defining Keyframes
Keyframes are used to specify the values for the animating properties at various stages of the animation. Keyframes are specified using a specialized CSS at-rule — @keyframes
. The keyframe selector for a keyframe style rule starts with a percentage (%
) or the keywords from
(same as 0%) or to
(same as 100%). The selector is used to specify where a keyframe is constructed along the duration of the animation.
Percentages represent a percentage of the animation duration, 0% represents the starting point of the animation, 100% represents the end point, 50% represents the midpoint and so on. That means, a 50% keyframe in a 2s animation would be 1s into an animation.
Example
.box {
margin: 50px;
width:120px;
height:110px;
background: url("/examples/images/star-fish-transparent.png") no-repeat;
position: relative;
left: 0;
animation-name: shakeit;
animation-duration: 2s;
}
/* 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
There are many properties to consider when creating the animations. However, it is also possible to specify all the animations properties in one single property to shorten the code.
The animation
property is a shorthand property for setting all the individual animation properties at once in the listed order. For example:
Example
.box {
margin: 50px;
width:103px;
height:130px;
background: url("/examples/images/octopus.png") no-repeat;
position: relative;
animation: repeatit 2s linear 0s infinite alternate;
}
/* Standard syntax */
@keyframes repeatit {
from {rig: 0;}
to {top: 50%;}
}
Note: If any value is missing or not specified, the default value for that property will be used instead. That means, if the value for
animation-duration
property is missing, no transition will occur, because its default value is 0.
CSS3 Animation Properties.
The following table provides a brief overview of all the animation-related properties.
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. |