CSS3 Animations

The first week back after the Christmas and New Year break and my first little project was to look at CSS3 animations. Two reasons for this, one, I have always wanted to find out more about CSS3 animation and have a play around with them, and two Langarth the company I work for are looking at ways to implement new technologies into our builds.

So lets begin!!!

CSS3 Animations means moving an object from one place to another, CSS3 Animations are slightly different from CSS3 Transitions as CSS3 Animations allows finer control over the animation. Researching about the inter webs has led me to believe that people combine the two, but I feel that they are different.

In the post I will give an example of building a circle that changes colours like a rainbow over a period of time and then repeats.

So lets set up the HTML

{code type=html}

All we have in the code above is a normal section tag with a div inside with a class of circle. That is all the HTML that we need. This code of course goes in between the body tag elements on your web page.

Now on to the CSS. Before we can our div to change colour we first have to set up the animation at the top of our CSS file. We do this by using the @keyframe tag followed by the name of the animation that we will use to call it later on.

The basic code for the @keyframe looks like this:

{code type=css}
@keyframes rainbow {
0% {
background-color: #FF0000;
}
100% {
background-color: #8000FF;
}
}
{/code}

Now I should stress straight away that the code above is the way it should be written but at the moment vendor prefix will need to be used, which means writing the code out three times.

Now in our example we want our background colour of our div to change to different colours over a period of time so we have to set our different time periods. The code is shown below:

{code type=css}
@keyframes rainbow {
0% {background-color: #FF0000;}
10% {background-color: #FF8000;}
20% {background-color: #FFFF00;}
30% {background-color: #80FF00;}
40% {background-color: #00FF00;}
50% {background-color: #00FF80;}
60% {background-color: #00FFFF;}
70% {background-color: #0080FF;}
80% {background-color: #0000FF;}
90% {background-color: #8000FF;}
100% {background-color: #FF0080;}
}
{/code}
Remember that we have to use vendor prefix at this time so we need to write them out again twice as shown below:
{code type=css}
@-webkit-keyframes rainbow {
0% {background-color: #FF0000;}
10% {background-color: #FF8000;}
20% {background-color: #FFFF00;}
30% {background-color: #80FF00;}
40% {background-color: #00FF00;}
50% {background-color: #00FF80;}
60% {background-color: #00FFFF;}
70% {background-color: #0080FF;}
80% {background-color: #0000FF;}
90% {background-color: #8000FF;}
100% {background-color: #FF0080;}
}

@-moz-keyframes rainbow {
0% {background-color: #FF0000;}
10% {background-color: #FF8000;}
20% {background-color: #FFFF00;}
30% {background-color: #80FF00;}
40% {background-color: #00FF00;}
50% {background-color: #00FF80;}
60% {background-color: #00FFFF;}
70% {background-color: #0080FF;}
80% {background-color: #0000FF;}
90% {background-color: #8000FF;}
100% {background-color: #FF0080;}
}
{/code}
Now that we have the animations set up we need to apply them to our div, but first we need to set the div up and make it a circle.
{code type=css}
.circle1 {
position: relative;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 1px solid #000;
height: 100px;
width: 100px;
}
{/code}
All the code above does is make a 100px by 100px div and turn it into a circle using border radius. To attach the key frame animation to the div by using the animation-name css tag. We also need to say how long we want the animation to run for during one cycle, We do this by using the animation-duration followed by a number in milli seconds, so for example 5000 would be 5 seconds. They is also one other tag we need to use and that is the animation-iteration-count tag, this tag simply says how many times you want the animation to loop around, for out little example we are going to be setting this to infinite, which means the animation will keep looping. The final tag we are going to be using is the animation-direction tag, which we set to alternate, this tag tells the animation to reverse when it gets to the end point, which stops it from jumping from 100% to 0%, to the animation will run 0% to 100% for the first loop and then 100% to 0% for the second loop and carry on like that. the CSS Code for our HTML Div is how below.

{code type=css}
.circle1 {
position: relative;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 1px solid #000;
height: 100px;
width: 100px;
-webkit-animation-name: rainbow;
-webkit-animation-duration: 5000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-moz-animation-name: rainbow;
-moz-animation-duration: 5000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
animation-name: rainbow;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-direction: alternate;
}
{/code}

You can properly tell that once again you need to use vendor prefix which means typing it out three times. This leads me on to browser support at the current time of this post, Well as you properly can guess the main players support CSS3 Animations. Chrome, Firefox and Safari all support it at the moment, Opera does not support CSS3 Animation which I found shocking if I am honest. Of course non of the Internet Explorer browsers support it, but it has been said that support is coming in IE10.

For the browsers that do not support CSS3 Animations you will have to either have static content or use Jquery and modernizr.

This was only a quick look at CSS3 Animations as I have been looking into it for the first week back.

Be Sociable, Share!

•