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.

Example Try this code »

<!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.

Example Try this code »

<!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.

Example Try this code »

<!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.

Example Try this code »

<!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.

Example Try this code »

<!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.

Example Try this code »

<!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

5 . How to make tooltip more Interactive using CSS
6 . Change property using Attribute Selector
7 . Create Simple Login Form
8 . Create Bootstrap 4 Spinner

Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors