CSS Almanac

animation

The animation property is used to call and control an @keyframe animation. Like this:

.element-to-animate {
  animation: NAME-YOUR-ANIMATION 5s infinite;
}

Which refers to a keyframe like this:

@keyframes NAME-YOUR-ANIMATION {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

You'll need vendor prefixes to get good browser support:

@-webkit-keyframes NAME-YOUR-ANIMATION {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}
@-ms-keyframes NAME-YOUR-ANIMATION {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

#box {
     -webkit-animation: NAME-YOUR-ANIMATION 5s infinite;
     -moz-animation:    NAME-YOUR-ANIMATION 5s infinite;
     -ms-animation:     NAME-YOUR-ANIMATION 5s infinite;
}

At the time of this writing the three vendor prefixes used above are the only ones implemented. At this point it's likely that the non-prefixed version will start to get implemented soon without major changes, so you may want to consider using non-prefixed versions as well.

For the sake of brevity the rest of the code on this page will only use -webkit-, but real world usage should use all the vendor prefixes.

Multiple steps

@-webkit-keyframes fontbulger {
	0% {
		font-size: 10px;
	}
	30% {
		font-size: 15px;
	}
	100% {
		font-size: 12px;
	}
}

#box {
     -webkit-animation: fontbulger 2s infinite;
}

If an animation has the same starting and ending properties, one way to do that is to comma-separate the 0% and 100% values:

@-webkit-keyframes fontbulger {
	0%, 100% {
		font-size: 10px;
	}
	50% {
		font-size: 12px;
	}
}

Or, you could always tell the animation to run twice (or any even number of times) and tell the direction to alternate.

Calling keyframe animation with separate properties

#box {
 -webkit-animation-name: bounce;
 -webkit-animation-duration: 4s;
 -webkit-animation-iteration-count: 10;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease-out;
 -webkit-animation-fill-mode: forwards;
 -webkit-animation-delay: 2s;
}

Animation Shorthand

Just space-separate all the individual values. The order doesn't matter except when using both duration and delay, they need to be in that order. In the example below 1s = duration, 2s = delay, 3 = iterations.

-webkit-animation: test 1s 2s 3 alternate backwards

Combine transform and animation

@-webkit-keyframes infinite-spinning {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

Multiple animations

You can comma-separate the values to declare multiple animations on a selector.

.animate-this {
   -webkit-animation:
      first-animation 2s infinite,
      another-animation 1s;
}

More Resources

• Mozilla Docs
• CSS3 Spec

Browser Support