4 Simple CSS3 Animation Tutorials

CSS3 allows you to create interactive animations using basic CSS code for your website. These tutorials are simple CSS3 animation tutorials that use 2D transforms to create some neat animation effects.

I decided to keep these animations somewhat simple so that you could understand how they work and quickly create them for yourself. You are free to copy the code and create your own custom CSS3 animations.

CSS3 Animation Tutorial Using “scale()”

First we are going to create an animation using the scale method.

If you’re unfamiliar with the scale() method basically it decreases or increases the size of an element using parameters for the Y axis and X axis.

What we are creating: lets take a look at the live demo of the animation using the scale property. Beware, the effect is set to infinite.

As you can see it’s an animation that scales in and out using the scale property to adjust the size.

Here is the HTML markup for this simple animation.


<div id="animation-container">

<div class="inner-circle">
</div>

</div>

The HTML for this animation is very simple and you don’t actually need a container for the animation. You could apply the full animation to the div inner-circle and it would still have the same effects.

I used a container to keep the code for the animation separate.

Now for the CSS.

 
#animation-container { 
animation: inout 3s; 
animation-iteration-count: infinite;
-webkit-animation: inout 3s; /* Safari & Chrome */
-webkit-animation-iteration-count: infinite; 
margin: auto;
} 

@keyframes inout { 
0%   { transform: scale(0, 0); } 
25%   { transform: scale(2, 2); }
50%   { transform: scale(0, 0); }
100%  { transform: scale(1, 1); } 
}

@-webkit-keyframes inout { /* Safari & Chrome */ 
0%   { -webkit-transform: scale(0, 0); } 
25%  { -webkit-transform: scale(2, 2); }
50%  { -webkit-transform: scale(0, 0); }
100% { -webkit-transform: scale(1, 1); } 
} 


Browser Functionality:

It turns out that IE 10 is now supporting the animation and keyframes properties without using the webkit. Finally IE is evolving!

It doesn’t work at all in IE9 or any lower version than 10. It works in Chrome and Safari, but only if you apply the -webkit- to your CSS properties. It also works without the webkit for Opera and the latest versions of Firefox.

CSS:

Here is a brief breakdown of the CSS:

The #animation-container is where I have applied the animation. I have gave the animation a name of “inout” which is a name of my choice. I have also set the animation time to 3seconds(3s). You can increase/decrease this amount for a faster or slower speed. I then applied the iteration-count which tells the animation how many times to run, you can set this to a numeric value or infinite, like I have.

@keyframes inout is used to determine the name of the animation, when the effect takes place, and what methods you will use. I have set my animation to scale(0,0) @25% which is beneath the original location. Next I used scale(2,2) @50% which will increase the size of the element. Then back down to scale(0,0) @75%, and to finish at the original location, I’ve used scale(1,1) @100%. The percentages basically tell the animation when to take effect during the time set for animation which in this case is 3 seconds.

CSS3 Animation Tutorial Using “translate()”

Now we will be creating a similar animation except we will be using the translate() method instead of scale(). Which moves the element as opposed too decreasing or increasing the size.

Take a look at the live demo.

OK, so I added the rotate() property to the animation because it was kind of boring, but there is still a simple use of the translate() property which changes the position of the element.

Also remember that this effect will look different depending on the size of your screen and whether or not your browser is at the maximum width.

The HTML markup is exactly the same as the first example.

<div id="animation-container">


<div class="inner-circle">
</div> 

</div>

Now in this case we have a use for our div container. If you were to apply the CSS code to the inner-circle instead of the “animation-container” you would actually have a different effect like this example.

As you can see it’s a slightly different animation. It’s the exact same code except it’s applied to the div inner-circle.

Here is the CSS.

 

#animation-container { 
animation: translate 3s; 
animation-iteration-count: 1; 
-webkit-animation: translate 3s; /* Safari & Chrome */
-webkit-animation-iteration-count: 1;
margin-left: 800px; 
} 

@keyframes translate { 
0%   { transform:  translate(0px, 0px);    } 
25%   { transform:  translate(-800px, 0px);   }
50%   { transform:  rotate(180deg);   }
100%  { transform:  translate(0px, 0px);   } 
}


@-webkit-keyframes translate { 
0%   { -webkit-transform:  translate(0px, 0px) ;   } 
25%   { -webkit-transform:  translate(-800px, 0px);   }
50%   { -webkit-transform:  rotate(180deg);   }
100%  { -webkit-transform:  translate(0px, 0px);   } 
} 

.inner-circle { 
background-image: url('images/experiment.png'); 
background-repeat: no-repeat; 
height: 500px; 
width: 500px; 
} 

#animation-container This time I have pushed the element 800px from the left using the margin-left property. I also called the animation name and I have set the “animation-iteration-count” to 1, so that the animation is only played once. In order to replay the animation the page must be refreshed or the iteration must be changed.

@keyframes translate I have used translate(0px, 0px) so that the animation starts from the original location. I used translate(-800px, 0px) to move the image backwards by 800px. I then used a rotate(180deg) and translate(0px, 0px) so that the image rotates 180deg and returns to the original location.

.inner-circle remains exactly the same. This is where you would call your image or apply css animation properties here to create a different effect.

CSS3 Animation Tutorial Using “rotate()”

So we briefly used the rotate method in the second tutorial. If you would like to learn how to create a rotating hover over box using the CSS3 transition effect, have a read of this article.

In this next example we’ll be using the rotate property to create a simple rotating animation.

Click here to take a look at the live demo.

This is the shortest amount of CSS I have used yet. All I wanted to create was a 360 turning logo. I’m not sure if you could find a use for it, but it’s a cool looking animation.

Here is the same HTML markup for this effect.

 
<div id="animation-container">

<div class="inner-circle">
</div> 

</div>

and here is the CSS code.

 

#animation-container {  
width: 1300px; 
animation: rotate 2s; 
animation-iteration-count: 2; 
-webkit-animation: rotate 2s; /* Safari & Chrome */
-webkit-animation-iteration-count: 2;
}

@keyframes rotate { 
100% { transform: rotate(360deg); } 
}

@-webkit-keyrframes rotate { /*Safari & Chrome */ 
100% { -webkit-transform: rotate(360deg); } 
} 


.inner-circle { 
background-image: url('images/experiment.png'); 
background-repeat: no-repeat; 
height: 500px; 
width: 500px; 
} 

#animation-container In this container I have added a set width of 1300px. The reason being is because I wanted to create a wide rotating effect, if you were to adjust the width to say 500px, the same size of the image, the image would rotate on the spot. The more you increase the width the larger the rotation becomes. You could add the animation properties to the inner-circle div and it would rotate on the spot because there is already a set width of 500px.

@keyframes rotate I have only used rotate(360deg) and set it to 100% because I wanted the 360 turn to be the whole effect.

CSS3 Animation Tutorial Using “Skew()”

The skew() method turns elements at a given angle depending on the parameters set for the X and Y axis. We can apply this method to our animations giving our animations a funky but cool effect.

In this animation I am going to combine both the skew() and scale() methods. Oh and this animation doesn’t skew correctly in IE 10.

Here is the live demo for the skew and scale effect.

It’s a pretty neat effect. I know it stretches the image but that is just part of the effect. It wouldn’t stretch if you created the image in pure CSS.

Again exactly the same HTML markup from the previous examples.

Here is the CSS:

#animation-container {   
animation: skew 2s; 
animation-iteration-count: 2; 
-webkit-animation: skew 2s; /* Safari & Chrome */
-webkit-animation-iteration-count: 2;
}

@keyframes skew { 
0%  { transform: skew(0deg,0deg) ; } 
25% { transform: scale(2,2);       } 
50% { transform: skew(100deg, 100deg);  } 
100% { transform: scale(1,1);        } 
}

@-webkit-keyframes skew { 
0%  { -webkit-transform: skew(0deg,0deg) ; } 
25% { -webkit-transform: scale(2,2);       } 
50% { -webkit-transform: skew(100deg, 100deg);  } 
100% { -webkit-transform: scale(1,1);        } 
}

.inner-circle { 
margin: auto; 
background-image: url('images/experiment.png'); 
background-repeat: no-repeat; 
height: 500px; 
width: 500px; 
} 

#animation-container is basically the same except I have used a different animation name and duration.

@keyframes skew I’ve used skew(0px, 0px) for the starting position of the animation. Scale(2,2) to enlarge the animation, skew(100deg, 100deg) to turn the element at an angle using the X and Y axis. Then finally I used scale(0,0) to scale the image back to its original size.

Very simple and unique animation effect. You could try changing the skew and scale parameters to make your own custom effect and of course upload your own images.

That’s everything! I hope you enjoyed these 4 simple CSS3 animation tutorials. Please subscribe for further updates and leave any feedback or suggestions below.

Author: Jake

Full time web designer and developer located in beautiful Ontario, Canada. Originally from the UK and decided to write a blog on my web development ventures... Huge passion for the web, design and internet marketing..

Share This Post On