An introduction to keyframe CSS3 animations

An introduction to keyframe CSS3 animations

Part of the CSS3 specification that I've found myself using more and more are keyframe animations. If you haven't used them before, this is a bit of an overview to how keyframes are structured.

There are a couple of different aspects to the keyframe.

1. keyframe selector - @rule and identifier

First, there's the keyframes @ rule where you specify your identifier (pick a name, ideally a semantic/descriptive one) for your animation that we will be referring to later in the code and define the animation sequence. You also need to include a list of keyframe selectors (waypoints for your animation). The keyframe list must at a minimum include rules for the start (0% or from) and end (100% or to) states.

2. keyframe declaration block

These are the rule sets where you can configure the timing and duration and other behaviour of the animation.

The properties and sub-properties of the animation are applied to the HTML element you are animating. Some examples of sub-properties to declare include the animation-name, animation-duration, animation-direction and animation-iteration-count .

For more information about sub-properties, check out the mozilla documentation which is, as always, aces.

nb. the examples are given without vendor prefixes, so don't forget to add those in live uses.

Code Example 1: Pulsing image

@keyframes pulse {
 from { transform: none; }
 50% { transform: scale(1.4); }
 to { transform: none; }
 #demo img {
/* expanded version of animation: pulse .5s infinite; */
   animation-name: pulse;
   animation-duration: 3s;
   animation-iteration-count: infinite;

example 2 - Fading away heading

 @keyframes fadeAway {
    0% {opacity: 0;}
    100% {opacity: 1;}

 h3 {
   animation-name: fadeAway;
   animation-duration: 5s;

And to go crazy with keyframes, check out

  1. ebooks
  2. CSS
  3. CSS3
  4. animation
  5. keyframe