Web Designing Tutorials

How to Create Animation Using CSS

Pinterest LinkedIn Tumblr
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;
}

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]

Where timing-function is one of the following values
cubic-bezier(number, number, number, number) | ease | ease-in | ease-in-out | ease-out | linear

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;}

Author

Shuseel Baral is a web programmer and the founder of InfoTechSite has over 8 years of experience in software development, internet, SEO, blogging and marketing digital products and services is passionate about exceeding your expectations.

Comments are closed.