CSS: Animation Tutorial

By Xah Lee. Date: . Last updated: .

Here's simple example of CSS animation.

Here's the code:

<span id="heart31507"></span>
#heart31507 {animation: heartbeat12978 1s 0s 300}

@keyframes heartbeat12978 {
    0% {font-size:2em;color:black}
    50% {font-size:4em;color:red}
    100% {font-size:2em;color:white}
}

The heart is just a Unicode character

[see Unicode Characters ☯ ⚡ ∑ ♥ 😄]

[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: heartbeat12978  /* 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 heartbeat12978 {
    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 “heartbeat12978”.

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}.

CSS Transition

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

Reference

http://www.w3.org/TR/css3-animations/

CSS Effects

  1. CSS: Round Corners, border-radius
  2. CSS: Box Shadow
  3. CSS: Text Shadow/Outline
  4. CSS Triangle, CSS Shapes
  5. CSS: 2D Transform
  6. CSS: Image Rollover
  7. CSS: Background Image, CSS Sprites Tutorial
  8. CSS: Transition Tutorial
  9. CSS: Animation Tutorial
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

Ask me question on patreon