Child

CSS3 Animations


« Previous Next Chapter »

An Animation is such a property of CSS3, which is used to animate the object, without using flash or any other animation application. With this feature of CSS3 You can change the object into one style to another style in animated way. The all measure browsers support Animation feature except of Internet Explorer. It gradually change an object style to another style, The complete Animation depend upon the declaring the Keyframes with the css.

Webkit Tutorial

Here is the Code :

#animated
{
text-align:center;
width:60px;
height:40px;
background:#6699FF;
color:#ffffff;
position:relative;
font-weight:bold;
font-size:20px;
padding:10px;
animation:animated_div 5s infinite;
-moz-animation:animated_div 5s infinite;
-webkit-animation:animated_div 5s infinite;
border-radius:5px;
-webkit-border-radius:5px;
}
 
@keyframes animated_div
{
0%   {left:0px;}
20%  {left:50px; background-color: green;}
40%  {left:140px; background-color: red;}
60%  {left:280px; background-color: yellow;}
80%  {left:425px; background-color: blue;}
100% {left:0px; background-color: pink;}
}
 
@-webkit-keyframes animated_div
{
0%   {left:0px;}
20%  {left:50px; background-color: green; margin-top: 50px;}
40%  {left:140px; background-color: red;margin-top: 0px;}
60%  {left:280px; background-color: yellow;margin-top: 50px;}
80%  {left:425px; background-color: blue;margin-top: 0px;}
100% {left:0px; background-color: pink;}
}
 
@-moz-keyframes animated_div
{
0%   {left:0px;}
20%  {left:50px; background-color: green;}
40%  {left:140px; background-color: red;}
60%  {left:280px; background-color: yellow;}
80%  {left:425px; background-color: blue;}
100% {left:0px; background-color: pink;}
}
Mamun Hossin Onick

Here is the Code :

#animate
{
width:100px;
height:100px;
background:green;
position:relative;
animation:myfirst 5s infinite;
-moz-animation:myfirst 5s infinite; /* Firefox */
-webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
-o-animation:myfirst 5s infinite; /* Opera */
}
 
@keyframes myfirst
{
0%   {background:gree; left:0px; top:0px;}
25%  {background:yellow; left:150px; top:0px;}
50%  {background:blue; left:250px; top:150px;}
75%  {background:red; left:0px; top:150px;}
100% {background:green; left:0px; top:0px;}

}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background:gree; left:0px; top:0px;}
25%  {background:yellow; left:150px; top:0px;}
50%  {background:blue; left:250px; top:150px;}
75%  {background:red; left:0px; top:150px;}
100% {background:green; left:0px; top:0px;}
}
 
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:gree; left:0px; top:0px;}
25%  {background:yellow; left:150px; top:0px;}
50%  {background:blue; left:250px; top:150px;}
75%  {background:red; left:0px; top:150px;}
100% {background:green; left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */
{
0%   {background:gree; left:0px; top:0px;}
25%  {background:yellow; left:150px; top:0px;}
50%  {background:blue; left:250px; top:150px;}
75%  {background:red; left:0px; top:150px;}
100% {background:green; left:0px; top:0px;}
}

CSS3 Animation Properties

The following table lists the @keyframes rule and all the animation properties:

Property Description CSS
@keyframes Specifies the animation 3
animation A shorthand property for all the the animation properties, except the animation-play-state property 3
animation-name Specifies the name of the @keyframes animation 3
animation-duration Specifies how many seconds or milliseconds an animation takes to complete one cycle. Default 0 3
animation-timing-function Describes how the animation will progress over one cycle of its duration. Default "ease" 3
animation-delay Specifies when the animation will start. Default 0 3
animation-iteration-count Specifies the number of times an animation is played. Default 1 3
animation-direction Specifies whether or not the animation should play in reverse on alternate cycles. Default "normal" 3
animation-play-state Specifies whether the animation is running or paused. Default "running" 3