css3-logo
Coding - Design - CSS3

Introducing CSS3 Animation

With CSS3 rules you can define more than just the style of your Web page elements. You can apply complex animations to items in your pages simply by including CSS declarations. In this tutorial we will work through the process of including a basic animation within a Web page. You should be able to complete the tutorial as long as you have some understanding of CSS.

Create Page Elements

To keep things simple, we will animate a short paragraph of text. Use the following page markup outline:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {width:50%; margin:auto; font-family:sans-serif;}
</style>
</head>
<body>
<div>
<p>
Here is some text.
</p>
</div>
</body>
</html>

The page includes a div with a paragraph in it. We will be adding more rules to the style section in the page head as we go along.

Define an Animation

We will be using the keyframes rule to define an animation. As you may know, a keyframe is a point within an animated sequence. By defining the appearance of the page elements at particular keyframes, your code prompts the browser to animate from one keyframe to the next. Keyframe animations in CSS can be extremely complex, but you can create a simple one with a few lines of code.

To define an animation, add the following to the style section:

@keyframes paraIn {
/*animation properties*/
}

The animation has a name so that we can identify it and apply it to page elements later. Inside the keyframes block, add a section indicating the start and end points:

@keyframes paraIn {
 from {
  margin-left:-100%;
 }
 to {
  margin-left:0%;
 }
}

As you can see, the animation specifies that the element it is applied to should start off to the left of its containing element and end inside it at the left-most point.

Unfortunately at the moment you need to add vendor-specific versions of the code for WebKit browsers as well:

@-webkit-keyframes paraIn {
 from {
  margin-left:-100%;
 }
 to {
  margin-left:0%;
 }
}

Apply the Animation

Now apply the animation by adding a declaration for the paragraph element:

p {
 animation-duration: 2s;
 animation-name: paraIn;
}

We specify the animation using the name we gave it and set a duration of 2 seconds. You can set various other properties including:

  • iteration – repeat the animation a particular number of times (or infinitely)
  • direction – make the animation reverse (or not) on repeating
  • fill mode – specify properties to apply before or after the animation
  • play state – handle pausing/ resuming
  • delay – if you don’t want the animation to elapse as soon as the element loads within the page.

Let’s specify a timing function:

p {
 animation-duration: 2s;
 animation-name: paraIn;
 animation-timing-function:ease-out;
}

The timing function determines how the animation should move between the keyframes you define, accelerating and decelerating as you require. There are lots of timing options to choose from. This one will ease the animation out, slowing down towards the end.

Add the vendor-prefixed version for each of these declarations:

p {
 animation-duration: 2s;
 animation-name: paraIn;
 animation-timing-function:ease-out;
 
 -webkit-animation-duration: 2s;
 -webkit-animation-name: paraIn;
 -webkit-animation-timing-function:ease-out;
}

At this point you can test the page in a browser. You should see the paragraph slide in from the left.

css3-animation-slide

Animation Keyframes

Let’s configure the animation in more detail. Rather than simply defining a from point and a to point, we can use percentage values to set more specific points in the animation.

Alter your keyframes section as follows, to use the same animation, but with percentages rather than from and to:

@keyframes paraIn {
 0% {
  margin-left:-100%;
 }
 100% {
  margin-left:0%;
 }
}

This is just a different way to define the animation we already used, but we can use percentage keyframe values to set multiple points within the animation. Alter your code again:

@keyframes paraIn {
 0% {
  margin-left:-100%;
 }
 90% {
  margin-left:10%;
 }
 100% {
  margin-left:0%;
 }
}

We define three keyframe points here: the beginning, 90% of the way through and the end. The start and end points are the same, but the additional point at 90% places the element slightly to the right, so the element will move back to the left at the end of the animation. Try adding more percentage points to your animation later.

Animation Transforms

We can also define CSS transforms we want to elapse as the animation unfolds. The keyframe points only describe where the element should be at particular points, not how it should get between them – this is where transforms can come in.

Let’s adjust the animations to use the translate transform instead of setting the margin:

@keyframes paraIn {
 0% {
  transform: translateX(-100%);
 }
 90% { 
  transform: translateX(10%);
 }
 100% {
  transform: translateX(0%);
 }
}

This moves the element along the X axis as before, but using a translate transform rule. We can combine this with other transforms – let’s rotate the element as well as moving it along the X axis:

@keyframes paraIn {
 0% {
  transform: translateX(-100%) rotate(0deg);
 }
 90% { 
  transform: translateX(10%) rotate(360deg);
 }
 100% {
  transform: translateX(0%) rotate(360deg);
 }
}

We define two transforms for each keyframe point: translating on the X axis and rotating. We use a percentage value to indicate the X translation at each of the three points and a degree value to represent the rotation. Using a rotation value of 360 degrees will rotate the element in a full circle, so that it ends up the right way up. By default it will rotate clockwise – to reverse rotation you could apply a negative degree value instead.

There are lots of other transforms you can use, including scaling, skewing and applying matrices. For now add the WebKit version for this one:

@-webkit-keyframes paraIn {
 0% {
  -webkit-transform: translateX(-100%) rotate(0deg);
 }
 90% {
  -webkit-transform: translateX(10%) rotate(360deg);
 }
 100% {
  -webkit-transform: translateX(0%) rotate(360deg);
 }
}

View the page in a browser again. This time it will rotate, then slide to the left.

css3-animation-rotate

This example may be simple, but it should have equipped you with the basic technique involved in applying CSS animations. Play around with the animation declarations and properties to see what is possible – what we have done here is just the tip of the iceberg!

Conclusion

As you can see, CSS3 animations are easy to implement. However, by tweaking the properties within them, you can achieve sophisticated visual effects within your Web pages. Try experimenting with your CSS animations, using transforms and animation properties. You can animate other page elements such as images, making your pages engaging without having to rely on third-party technologies such as Flash. However, it goes without saying that you should test your animations in as many browsers as possible, making sure your pages still function when the properties are not fully supported.

About the author

I'm a developer and technical writer - see benormal.info for details. Follow me on Twitter @BrainDeadAir or email me at sue@benormal.info.

Share this post

Leave a Comment

Subscribe To Our Newsletter