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

CSS 3 Animation

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

CSS 3 Animation Delay

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

CSS 3 Multiple Animation

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

CSS 3 Reverse Animation

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











Follow Us: