How To Create Animation Using CSS

You can create animations for any HTML elements using CSS animation property. This property allows you to assign name of animation, duration of animation play, style of animation, time to start animation, animation direction and number of times animation should play. There are sub properties for each animation property to assign and also have short hand property which is used to set all the animation properties at once where each value is defined by its named property. Like other shorthand properties, values may be omitted. Here are syntax and example of animation property to create animation.

Syntax:

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction

Example:

#animation1 {
-webkit-animation: move 5s ease-out 0 infinite alternative;
-moz-animation: move 5s ease-out 0 infinite alternative;
}

While creating animations, @keyframes rule is used to define the properties that will be animated in an animation rule.

Syntax:

@keyframes: keyframe-name {percentage | from | to {css rules}}

Example:

@keyframes move {
from{left: 0; top:0;}
50% {left:500px;top:0;}
to {left:500px;top:500px;}
}

How To Assign Animation Name and Duration

There is a property animation-name, which is used to define the animations that should be run. The @keyframe directive specified defines the properties to animate. The keyword none can be used to override a cascade.

Syntax:

animation-name: @keyframe-name | none [,@keyframe-name|none]

Here, @keyframe-name is the name of the animation defined by an @keyframe directive.

There is another property animation-duration, which is used to define the time taken in one iteration of an animation to play where time is a valid time like 4s 400ms.

Syntax:

animation-duration: time [,time]

Example:

@-webkit-keyframes move {
from{left: 0; top:0;}
50% {left:300px;top:0;}
to {left:300px;top:100px;}
}
@-webkit-keyframes resize {
from{height:300px;width:100px;}
50% {height:100px;width:100px;}
to {height:100px;width:300px;}
}
@-webkit-keyframes fade {
from{opacity:1;}
50% {opacity:0.5;}
to {opacity:0.1;}
}
@keyframes move {
from{left: 0; top:0;}
50% {left:300px;top:0;}
to {left:300px;top:100px;}
}
@keyframes resize {
from{height:300px;width:100px;}
50% {height:100px;width:100px;}
to {height:100px;width:300px;}
}
@keyframes fade {
from{opacity:1;}
50% {opacity:0.5;}
to {opacity:0.1;}
}
#animation1{
-webkit-animation-name:move, resize, fade;
-webkit-animation-duration:10s, 10s, 10s;
-webkit-animation-iteration-count:infinite;
animation-name:move, resize, fade;
animation-duration:10s, 10s, 10s;
animation-iteration-count:infinite;
position:relative;
}

Demo:

See the Pen How To Assign Animation Name and Duration by Shuseel Baral (@shuseel) on CodePen.

How to Set Animation Direction and Time to Start Animation

Using animation-direction property, you can define how animation plays for every iteration in reverse or repeats.

Syntax:

animation-direction: normal | alternate [,normal | alternate]

You can set time to start animation using animation-delay property.

Syntax:

animation-delay: time1 [,…timeN]

Example:

Along with the @keyframes rules given on above example use the following CSS rule.

#animation1{
-webkit-animation-name:move, resize, fade;
-webkit-animation-duration:10s, 10s, 10s;
-webkit-animation-direction: alternate;
-webkit-animation-delay: 0s, 2s, 3s, 4s;
-webkit-animation-iteration-count:infinite;
animation-name:move, resize, fade;
animation-duration:10s, 10s, 10s;
animation-direction: alternate;
animation-delay: 0s, 2s, 3s, 4s;
animation-iteration-count:infinite;
position:absolute;
}

Demo:

See the Pen How to Set Animation Direction and Time to Start Animation by Shuseel Baral (@shuseel) on CodePen.

How to Set How Animation Will Play

There is a property animation-timing-function to describe how the animation will play.

Syntax:

animation-timing-function: timing-function [,timing-function2,….timing-functionN]

Example:

Along with the @keyframes rules given on above example use the following CSS rule.

#animation1{
-webkit-animation-name:move;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
animation-name:move;
animation-duration:5s;
animation-timing-function:linear;
animation-iteration-count:infinite;
position:absolute;
}

Demo:

See the Pen How to Set How Animation Will Play by Shuseel Baral (@shuseel) on CodePen.

How to Set How Number of Times Animation Should Play

You can set how number of times animation should play using animation-iteration-count property.

Syntax:

animation-iteration-count: number | infinite [,number | infinite]

Example:

Along with the @keyframes rules given on above example use the following CSS rule.

#animation1{
-webkit-animation-name:move;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count:2;
animation-name:move;
animation-duration:5s;
animation-iteration-count:2;
position:relative;
}
#animation2{
-webkit-animation-name:move;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count:infinite;
animation-name:move;
animation-duration:5s;
animation-iteration-count:infinite;
position:relative;}