CSS: Animation

By Xah Lee. Date: 2013-08-10. Last updated: 2024-06-09.

Example: CSS Animation

Here is simple example of CSS animation.

♥

Here is the code:

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

#heart31507 {animation: beat46564 1s 0s 300}

@keyframes beat46564 {
    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 ♥ (U+2665: BLACK HEART SUIT)

〔see Unicode Search 😄〕

〔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, set a name, duration, repetition count, etc.
Use the @keyframes (called “at-rule”) to specify the CSS for each key frame of the animation.

「animation」 property

#heart31507 {
animation: beat46564  /* animation-name */
 1s /* animation-duration */
 0s /* animation-delay */
 30 /* animation-iteration-count */
}

The CSS property animation is a shorthand property for:

animation-name
animation-duration
animation-delay
animation-iteration-count
animation-timing-function
animation-direction

「@keyframes」 at-rule

For example, in:

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

This specifies the CSS for each key frame of the animation named “beat46564”.

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

Browser Support