Home > CSS3 > A Simple CSS3 Animation Tutorial

A Simple CSS3 Animation Tutorial

CSS Animation

CSS3 is great way to Create Animations, we can replace flash Animations,Animated images and JavaScript with CSS3 Animation properties.

In this CSS3 Animation Tutorial I will explain how to create Walking Man Animation Effect Using CSS3 alone as shown below.

CSS3 Animation
CSS3 Animation Tutorial


At the end of this post you will understand following CSS3 Animation Properties.

  • CSS3 KeyFrame Animation :        property which allows us to create animations.
  • CSS3 Transform :                              property which allows us to rotate,scale,skew,move elements.
  • CSS3 Transform Origin :                property which sets the origin of transformations

First we will create static man here is the sample HTML code


We divided man into two parts

  • Man Body which contains Head , chest and Hands.
  • Man Legs

Now we will apply CSS


The CSS code is straight forward except transform property(For Middle Part)

  • Skew property turns element at an given angle,depending upon parameters X or Y axis


In our example I used skewY which turns element vertically(Y-axis) -30 deg.

  • And scale property increased or decreases the element size, depending on the parameters given for the width (X-axis) and the height (Y-axis)

The above code creates sample body parts as shown below

CSS3 Animation
CSS3 Animation Tutorial


Now we have to align all this body parts to create man

Apply the following CSS Code.


This will create the static Man as shown below.

CSS Animation
CSS3 Animation Tutorial

Now we apply CSS3 KeyFrame rule  property to move this man.

What is CSS3 KeyFrame rule?

This property allows us to Create Animations Using CSS3. Keyframe property supports all major browsers (IE 10+) and for safari chrome we have to prefix corresponding browser engine

To create Animations follow below two steps

  • First Define CSS styles inside the @keyframetag
  • Now apply the rule to the element using animation property.

Observe the below sample CSS3 KeyFrame Animation Example which changes the div color to red to yellow for every 5 sec


We defined a @keyframe with name “myfirst”  We are changing from red to yellow.And applying the animation property on div with duration. You must specify the duration otherwise animation wont effect because default value is ‘0’

We can use keywords like “from” and “to” for changing styles or we can specify change in percent 0% means “first”  and 100% means “to”

0% is the beginning of the animation and 100% is when the animation is complete. Visit W3schools for more details.

Now come to our CSS3 Animation Demo

I divided animations into two parts

  • Moving hands and Legs
  • Moving Entire Body

For Moving Hands Apply the Following CSS


Right hand and left leg should sink with each other so applied same CSS3 Animation Effect for both elements and vice versa.

For moving hands I am using CSS3 transform rotate property from 30 degrees to -30 degree.

And I applied CSS3 transform-origin property as 0%(x-axis) 0%(Y-axis) which specify that with respect to element starting position we should apply the transformation.

i.e., we should rotate leg or hand at angle of 30 deg with respect element starting position.(Remove this property in demo example and check the animation you will understand in a better way).

And infinite means continuously we should apply the animation.

Here is the CSS3 Animation.

Animation Using CSS3
Animation Using CSS3

Only Legs and Hands are moving rite. Now we should move entire body for that purpose I applied following animation to manBody


The Logic straight forward simply we should apply the margin-left style  30px to 600px for every 9 sec.

Here is the Final Demo for Walking Man Effect Using CSS3 Animation.

NOTE: The above CSS is for Chrome and Safari which uses Webkit engine For Opera and IE10 No need to add any prefix and For mozilla add Moz prefix.

The Demo works fine with Chrome Safari Mozilla IE10 I have not tested with Opera I hope it will work.

Also Read: Google Hangout Effects using HTML5 Canvas

I hope you’ve enjoyed this CSS3 Animation Tutorial and that it gives you more ideas on CSS3 Animation effects.If so share this post with your friends and also join our mailing list I will be sharing my learnings and experiments with HTML5 and CSS3

Wait before leaving. why can’t you follow me on twitter or be a friend on Facebook to get in touch me.

And Finally Don’t Forgot to Join Our Reader List. Read Popular tutorial on HTML5

Arunkumar Gudelli
I am a Simple Guy, Standing Infront of the World, asking you to Follow Me. Don't miss any posts from Me,Subscribe to the RSS Feed. You can connect me via @twitter or @facebook or Google+ or e-mail.