CSS3 Animations
With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScripts in many web pages. With this feature of CSS3 You can change the object into one style to another style in animated way.
@keyframes rule.
The @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.
CSS3 animation
When the animation is created in the @keyframe, bind it to a selector, otherwise the animation will have no effect. Bind the animation to a selector by specifying at least these two CSS3 animation properties:
1 Specify the name of the animation
2 Specify the duration of the animation
What are Animations in CSS3?
An animation is an effect that lets an element gradually change from one style to another.You can change as many styles you want, as many times you want. Specify when the change will happen in percent, or the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.
CSS3 Animation Properties
Property Description
@keyframes Specifies the animation
animation A shorthand property for all the the animation properties
animation-name Specifies the name of the @keyframes animation
animation-duration Specifies how many seconds or milliseconds an animation takes to complete one cycle
animation-direction Specifies whether or not the animation should play in reverse on alternate cycles
animation-delay Specifies when the animation will start
animation-iteration-count Specifies the number of times an animation should be played
CSS3 Animation Properties
animation
animation-name
animation-duration
animation-direction
animation-delay
animation-iteration-count
CSS3 @keyframes Rule
With the @keyframes rule, you can create animations. The animation is created by gradually changing from one set of CSS styles to another. During the animation, you can change the set of CSS styles many times.
Example:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset=utf-8>
<title>CSS3 Examples</title>
<style type="text/css">
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS3 animation Property:
The animation property is a shorthand property for six of the animation properties: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, and animation-direction.
Syntax
animation: name duration timing-function delay iteration-count direction;
Example:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset=utf-8>
<title>CSS3 Examples</title>
<style type='text/css'>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-moz-keyframes mymove /*Firefox*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS3 animation-duration Property:
It defines how many seconds or milliseconds an animation takes to complete one cycle.
Syntax
animation-duration: time;
Value Description
time Specifies the length an animation takes to finish. Default value is 0, meaning there will be no animation
Example:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset=utf-8>
<title>CSS3 Examples</title>
<style type='text/css'>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove infinite;
animation-duration:1s;
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS3 animation-iteration-count Property
It defines how many times an animation should be played.
Syntax
animation-iteration-count: value;
Value Description
n A number that defines how many times an animation should be played
infinite Specifies that the animation should be played infinite times (for ever)
Example:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset=utf-8>
<title>CSS3 Examples</title>
<style type='text/css'>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s;
animation-iteration-count:3;
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS3 animation-direction Property
The animation-direction property defines whether or not the animation should play in reverse on alternate cycles. If the animation-direction value is "alternate", the animation will be played as normal every odd time (1,3,5,etc..) and backwards every even time (2,4,6,etc...).
Syntax
animation-direction: value;
Value Description
normal Default value.The animation should be played as normal
alternate The animation should play in reverse on alternate cycles
Example:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset=utf-8>
<title>CSS3 Examples</title>
<style type='text/css'>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s infinite;
animation-direction:alternate;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
</body>
</html>