CSS3 Animation with @keyframes

As well as transitions we can animate in CSS3 with @keyframes. This technique gives you much more control over the animation and allows for the production of reuseable animations which you could build up into a library. As with transitions the same caveats regarding HTML5 friendly browsers and vendor prefixes apply. Again these examples will use -webkit- prefix for brevity.

A Quick Start Example

To get the ball rolling (quite literally) here is a simple example.

@-webkit-keyframes myMove {
  0% {
    left: 0;
  }
  100% {
    left: 500px;
  }
}
#ball{
    -webkit-animation-name: myMove;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
     /* make the ball */
     border-radius: 50px;
     background-color: #ff0000;
     width: 100px;
     height: 100px;
     position: absolute;
}

CodePen Demo

Creating and Naming a Keyframe Animation

The @keyframe line creates and names our animation as 'myMove'.

Within the curly { .. } brackets we then set the CSS properties at certain stages in the animation known as the animation selectors. These are exactly like CSS selectors but you are choosing a point in time rather than a HTML element.

  0% {
    left: 0;
  }
  100% {
    left: 500px;
  }

Keyframe Selectors / Steps

The above has two animation selectors or steps at 0% and 100%. These will change the CSS left property from 0, at the beginning (0%), to 500px at the end (100%). As with other CSS selectors you can set more than one property and you can also have other animation selectors at whatever percentage values you like. For example this places a bit point at 50%.

  0% {
    left: 0;
  }
  50%{
    left: 50px;
  }
  100% {
    left: 500px;
  }

CodePen Demo

Instead of percentages you can also use from and to.

  from {
    left: 0;
  }
  to{
    left: 500px;
  }

Assign the Animation with animation-name

Once an animation is created it needs to be assigned to an element in the HTML page. We can do this with a standard CSS selector by assigning the animation-name property to that of our animation ie:

#ball{
    -webkit-animation-name: myMove;
}

Set the length of the animation with animation-duration

The animation-name property alone will not be enough even for a basic animation. We also need to set the duration for the animation and we do that with the animation-duration property. The animation-duration takes a value in seconds s or milliseconds ms. For example:

#ball{
    -webkit-animation-name: myMove;
    -webkit-animation-duration: 2s;
}

Triggering the Animation with events

CSS animations can be triggered by the likes of :hover or the use of Javascript events. It is often useful not to place the hover directly on the element you want to animate, but rather on a parent element. In the revised example the HTML now appears as:

<div id="playground">
  <div id="ball"></div>
</div> 

Notice how the <div id="ball"> is now a child of the <div id="playground">. We can now amend our CSS as follows.

@-webkit-keyframes myMove {
  0% {
    left: 0;
  }
  100% {
    left: 500px;
  }
}
#playground{
  border:1px solid #000000;
  position:relative;
  height:150px;
}
#ball{
     border-radius: 50px;
     background-color: #ff0000;
     width: 100px;
     height: 100px;
     position: absolute;
}
#playground:hover #ball{
    -webkit-animation-name: myMove;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-timing-function: ease-in;
 -webkit-animation-fill-mode: forwards;
}

Now <div id="ball"> will animate when <div id="playground"> is hovered over.

Tip: For a much larger set of options use Javascript to detect an event and then swap the classes applied.

Control Playback with with animation-play-state

The animation-play-state property can be used to stop/start an animation. The values used are running and pause. To pause a animation via a Javascript event we could use:

document.getElementById('redBox').style.webkitAnimationPlayState = "paused"

CodePen Demo

Easing with animation-timing-function

If you have ever used a tool like Flash you will know that animations can be made more realistic by applying what are known as easing functions. Think of the way a train eases into and stops at a station. That would be an ease-out. The way a train starts from the station slowly and speeds up is known as an ease-in. By default CSS animations have an ease function applied to them so they start slowly and also slow down towards the end. The best way to understand the ease functions is to see them in action.

View The Demos

To change the easing function we therefore use the animation-timing-function property ie:

-webkit-animation-timing-function:ease-in;

View Demo  CodePen Demo

Repeating ourselves with animation-iteration-count

The animation-iteration-count sets the number of times an animation should be played. Use a numeric value or set it to infinite

-webkit-animation-iteration-count:infinite;

View Demo  CodePen Demo

Changing Direction with animation-direction

Setting the animation-direction property to a value of alternate will make the animation reverse on completion. When used with animation-iteration-count set to infinite you can create a seamless looping animation.

-webkit-animation-direction:alternate;

View Demo  CodePen Demo

Holding things up with animation-delay

To apply a delay at the beginning of an animation use animation-delay. The animation-delay takes a value in seconds s or milliseconds ms. For example:

-webkit-animation-delay:2s;

Controlling the starting and end points with animation-fill-mode

If animation-direction is not used then an animation with by default jump back to its start point. With animation-fill-mode the animation can be set such that its doesn't jump back to the start. This is done by setting animation-fill-mode to the somewhat counter intuitive value of forwards. What this will do is leave the last calculated keyframe in view.

-webkit-animation-fill-mode:forwards;

View Demo  CodePen Demo

As animation-fill-mode also has a setting of backwards. This is mainly used with animation-delay to ensure the users sees the animation in its first state whilst the delay plays out.

	-webkit-animation-delay:2s
  	-webkit-animation-fill-mode:backwards;

View Demo  CodePen Demo

Finally there is a third option for animation-fill-mode of both which allows you to use both the forwards and backwards techniques on the same animation.

View Demo  CodePen Demo

The animation shorthand

Finally you can put together the animation properties in a shorthand property. You can place the properties in any order the only caveat is that if both duration and delay are used, duration goes first - as it is the most important.

The following:

 -webkit-animation: myMove 4s 2s forwards;

is shorthand for

 -webkit-animation-name: myMove;
 -webkit-animation-duration: 4s;
 -webkit-animation-delay: 2s;
 -webkit-animation-fill-mode: forwards;

View Demo  CodePen Demo

Leave a Reply

*