CSS3 Animations
CSS Animation property is used to define animation on the elements of the webpage. You can change as many CSS properties you want,
as many times you want. Keyframes
are used in defining animation. It holds the different styles of the element it would
have at certain times.
How CSS3 animation works
The animation defined in the @keyframe
rule, it must be added with selector; otherwise the animation will not work.
The animation can be added to a selector by specifying the name and the duration of the animation.
CSS3 animation properties
Properties |
Description |
@keyframes |
It specifies different styles in animation at different duration. |
animation |
It is a shorthand property,to set all the properties at once. |
animation-delay |
It specify the time-period after which the animation will start. |
animation-fill-mode |
it specifies the static style of the element. |
animation-iteration-count |
It specify the number of times the animation should be played. |
animation-play-state |
It specify if the animation is running or paused. |
animation-name |
It specify the name of @keyframes animation. |
animation-timing-function |
It specify the speed curve of the animation. |
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Animation </title>
<meta charset="UTF-8">
<style>
div {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* Standard syntax */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>
<div></div>
<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>
</body>
</html>
Output
CSS 3 Animation
Note: When an animation is finished, it changes back to its original style.
Note : If the animation-duration property is not specified,
the animation will have no effect, because the default value is 0.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Animation </title>
<meta charset="UTF-8">
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Output
Delay an Animation
The animation-delay
property is used to specify the delay for the start of an animation.
In the example below, try to undestand the working of this property and make some changes to the value of the property in the editor.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Animation Delay </title>
<meta charset="UTF-8">
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Output
Run Multiple Animation
The animation-iteration-count
property specifies the number of times an animation should run. Look at the example below to see how many times the animation runs and also change the value and then observe the changes.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Multiple Animation </title>
<meta charset="UTF-8">
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-iteration-count: 3; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
Output
Run Animation in Reverse Direction
The animation-direction
property specifies that an animation run in reverse direction or alternate cycles.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Reverse Animation </title>
<meta charset="UTF-8">
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-iteration-count: 3; /* Safari 4.0 - 8.0 */
-webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: alternate;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
Output
Speed of the Animation
The animation-timing-function
property specifies the different speeds of the animation. The various values of this property gives different kind of speed curves to the element.
The function could have these values:
- ease - It is a default value. A slow start, then fast, then ends slowly.
- linear - It has same speed from start to end.
- ease-in - It results in a slow start.
- ease-out - It results in a slow end.
- ease-in-out - It results in a slow start and end.
- cubic-bezier(n,n,n,n) - It lets you define your own values.
In the example below you can see the use of all these values.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Animation Speed </title>
<meta charset="UTF-8">
<style>
div {
width: 100px;
height: 50px;
text-align: center;
padding-top:30px;
background-color: seagreen;
font-weight: bold;
position: relative;
-webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 5s infinite;
}
/* Safari 4.0 - 8.0 */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}
/* Standard syntax */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
from {left: 0px;}
to {left: 300px;}
}
/* Standard syntax */
@keyframes mymove {
from {left: 0px;}
to {left: 300px;}
}
</style>
</head>
<body>
<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>
</body>
</html>
Output
CSS 3 Animation Speed
linear
ease
ease-in
ease-out
ease-in-out