Before going through this post about animations, I prefer if you can go through the couple of previous psost on CSS3 2D and 3D transforms that I have published. Most of the concepts used their will be helpful in understanding this post.
First of all, to create animation in CSS3, we have to know about a stranger and that is key-frame If you know some animation creating tool like flash, Moho or even any video editing tools, you will surely know what these key frames are. Yes, collection of key frames makes a complete animation. here, in CSS3, the rule is @keyframes and it is where the animation is created. We have to specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.
Note that, I use Google Chrome to test all my HTML5 and CSS3 pages throughout all these posts where Chrome requires the prefix -webkit- to work with them.
Bind the animation to a selector by specifying at least these two CSS3 animation properties:
-->Specify the name of the animation
-->Specify the duration of the animation
-->Specify the duration of the animation
It's just like creating a keyframe and telling who should use it specifying a time as well. So, all we have to do is creating @keyframes specifying when each of them should be displayed and what will be changed in the element during the appearance of each of those key frames and finally telling the element which required the animation in it about the key frames we have created.
I thought to go for a little animation example at once, without describing little concepts that you may already know.
first of all, I would like you to see the output by following the link below to know what we are going to animate.
.bmp)
Don't get scared :) you have to do very little work in CSS3 to get that output. have a look at the code below.
<!DOCTYPE html>
<html>
<head>
<style>
/*I am just creating a div with some styles as below
then i also specfy that it is going to be animated using the myfirst @keyframes
*/
div
{
width:150px;
height:150px;
border-style:ridge;
border-radius:20px;
background:red;
position:relative;
-webkit-animation:myfirst 15s; /*the animation using myfirst keyframes will last for 15 seconds*/
}
/*now, we'll create the @keyframes
Note that, I want to move my div element to ten diffrrent position in ten diffrrent colors
so, I specify the starting (0%) and ending (100%) points with a collection of gradually increasing percentage values to get hold of ten positions.
In each position , I specify a new color to the background and state the x and y positions where the div should find its path through. The path I specify is sort of a box-zig-zag way.
Do a little calculation to decide the x and y positions that you must follow, then it's a matter of applying the same in each line :) that's all with CSS3. then you can use the div tag wherever you want in the page.
the animation is done ...
[the highlighted part does a small transform to rotate the element around X axis to 360 degrees as a 3D transformation]
*/
@-webkit-keyframes myfirst
{
0% {background:aqua; left:0px; top:0px;-webkit-transform:rotateX(360deg)}
10% {background:blue; left:0px; top:100px;}
20% {background:cyan; left:100px; top:100px;}
30% {background:green; left:100px; top:0px;}
40% {background:pink; left:200px; top:0px;}
50% {background:purple; left:200px; top:100px;}
60% {background:magenta; left:300px; top:100px;}
70% {background:coral; left:300px; top:0px;}
80% {background:red; left:300px; top:0px;}
90% {background:orange; left:300px; top:100px;}
100% {background:yellow; left:400px; top:100px;}
}
</style>
</head>
<body>
<p>This shape changes ten positions in ten different colors</p>
<div>@@@@@@@@@@</div>
</body>
</html>
