CSS: Animation

By Xah Lee. Date: . Last updated: .

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:

@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

CSS, Transform, Animation

Animation, CSS, SVG, Web