CSS: Animation

Example: CSS Animation

Here is simple example of CSS animation.

Here is the code:

<span class="myheart">♥</span>

.myheart {
 animation: mybeat 1s 0s 300;
}

@keyframes mybeat {
 0% {
  font-size: 2rem;
  color: darkred;
 }
 50% {
  font-size: 4rem;
  color: red;
 }
 100% {
  font-size: 2rem;
  color: darkred;
 }
}

The heart is just a Unicode character ♥ (U+2665: BLACK HEART SUIT)

How Does CSS Animation Work?

There are 2 parts to specify a animation.

1. Use the animation property to specify a animation, set a name, duration, repetition count, etc.
2. Use the @keyframes (called “at-rule”) to specify the CSS for each key frame of the animation.

The animation property

.myheart {
 animation: mybeat 1s 0s 30;
 /* name duration delay 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 mybeat {
 0% {
  font-size: 2rem;
  color: darkred;
 }
 50% {
  font-size: 4rem;
  color: red;
 }
 100% {
  font-size: 2rem;
  color: darkred;
 }
}

This specifies the CSS for each key frame of the animation named mybeat.

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

• As of 2014-03-06, CSS animation is supported by {Firefox, Google Chrome, IE10, Opera}.