CSS: Animation Tutorial

By Xah Lee. Date: . Last updated: .

This page is a tutorial on CSS3 animation.

Here's simple example.

Here's HTML code:

<span id="heart31507">♥</span>

Here's CSS code:

#heart31507 {animation: beating-of-my-heart 1s 0s 30}

@keyframes beating-of-my-heart {
    0% {font-size:14px;color:black}
    20% {}
    40% {}
    50% {font-size:30px;color:red}
    60% {}
    80% {}
    100% {font-size:14px;color:white}

/* those 20% {} etc are not needed, but just to show the general form */

The heart is just a Unicode character 〔➤see List of Commonly Used Symbols in Unicode ♂ ♀ ♥ ¥ α © §〕 〔➤see Character Sets and Encoding in HTML

How Does CSS Animation Work?

There are 2 parts to specify a animation.

① Use the animation property to specify a animation. Like this:

#heart31507 {
animation: beating-of-my-heart  /* animation-name */
 1s                             /* animation-duration */
 0s                             /* animation-delay */
 30                             /* animation-iteration-count */

The CSS property animation is a shorthand property for:

② Use the new @keyframes (called “at-rule”) to specify the CSS for each frame of the animation.

For example, in:

@keyframes beating-of-my-heart {
    0% {font-size:14px;color:black}
    50% {font-size:30px;color:red}
    100% {font-size:14px;color:white}

This specifies the CSS for “each” frame of the animation named “beating-of-my-heart”.

The 0% {…} is the beginning of animation. The 100% {…} is the end of animation. You can have other percentages. Inside the curly brackets are normal CSS properties and values.

Browser Support

As of , CSS animation is supported by {Firefox, Google Chrome, IE10, Opera}.

As of CSS Animation works in current version of {Firefox, IE10, Opera}. For Google Chrome and Safari, you need to use -webkit-animation and @-webkit-keyframes.

CSS Transition

Note, CSS Animation is different from CSS Transition. For transition, see CSS: Transition Tutorial.


Like what you read? Buy JavaScript in Depth.