CSS Animation

Posted on Updated on

CSS Animation

Css animation are the common and easy way to make website interactive and light. Animation is change the stile from one to another. We can change CSS property how many we want. To use animation we have to use keyframe. It tell from which style change the property to which style . it depends on the time duration which we provide we have to bind it with the animm. We have to declare the animation with the help of the name where we want to set the animm.

Simple Example :

< !doctype html>

< html>

< head>

< title>Animm < / title>

< style>

# animm

{

width : 100px ;

height : 100px ;

background – color : red ;

animation – name : animma ;

animation – duration : 4s ;

}

@ keyframes animma

{

from{background – color : red ; }

to{background – color : blue ; }

}

< / style>

< / head>

< body>

< div id=”animm”>

< / div>

< / body>

< / html>

If duration is not use it show no effect because the default duration is 0. We can set the animation with help of % instead of from and to . like animation start when 60% complete and its full complete at 100%.

Simple Example :

< !doctype html>

< html>

< head>

< title>Animm < / title>

< style>

# animm

{

width : 100px ;

height : 100px ;

background – color : red ;

animation – name : animma ;

animation – duration : 4s ;

}

@ keyframes animma

{

0%{background – color : red ; }

40%{background – color : blue ; }

60%{background – color : pink ; }

100%{background – color : white ; }

}

< / style>

< / head>

< body>

< div id=”animm”>

< / div>

< / body>

< / html>

In this example the animation start from 0 and step by step its happening and at the end its back its real state.

Application in Animation :

We can create a application in animation like move box around the screen lets see how it can be happen with css animation :

Simple Example :

< !doctype html>

< html>

< head>

< title>Animm < / title>

< style>

# animm

{

width : 100px ;

height : 100px ;

background – color : red ;

position : relative ;

animation – name : animma ;

animation – duration : 4s ;

}

@ keyframes animma

{

0%{background – color : red ; top : 0px ; left : 0px ; }

30%{background – color : blue ; top : 0px ; left : 60px ; }

50%{background – color : pink ; top : 60px ; left : 60px ; }

70%{background – color : pink ; top : 60px ; left : 0px ; }

100%{background – color : white ; top : 0px ; left : 0px ; }

}

< / style>

< / head>

< body>

< div id=”animm”>

< / div>

< / body>

< / html>

In this example the box move left and then down and then right then top with change the color.

Delay :

We can also set the delay with the help of animation delay property . with this we can make more attractive application in animation.

Syntax :

animation – delay : value here in sec ;

we can set the repeat ion of the animation with the help of animation – itreaction – count : value here

how many time we want to run the animation. We can set the value infinity.

Simple Example

< !doctype html>

< html>

< head>

< title>Animm < / title>

< style>

# animm

{

width : 100px ;

height : 100px ;

background – color : red ;

position : relative ;

animation – name : animma ;

animation – duration : 4s ;

animation – delay : 5s ;

animation – iteration – count : 3 ;

}

@ keyframes animma

{

0%{background – color : red ; top : 0px ; left : 0px ; }

30%{background – color : blue ; top : 0px ; left : 60px ; }

50%{background – color : pink ; top : 60px ; left : 60px ; }

70%{background – color : pink ; top : 60px ; left : 0px ; }

100%{background – color : white ; top : 0px ; left : 0px ; }

}

< / style>

< / head>

< body>

< div id=”animm”>

< / div>

< / body>

< / html>

Reverse order animation :

If we want to run the animation in reverse order we use the direction of the animation.

Syntax :

Animation – direction : reverse ;

We can use alternate value in this animation work in both direction reverse and its normal order.

Simple Example :

< !doctype html>

< html>

< head>

< title>Animm < / title>

< style>

# animm

{

width : 100px ;

height : 100px ;

background – color : red ;

position : relative ;

animation – name : animma ;

animation – duration : 4s ;

animation – delay : 5s ;

animation – iteration – count : 4 ;

animation – direction : alternate ;

}

@ keyframes animma

{

0%{background – color : red ; top : 0px ; left : 0px ; }

30%{background – color : blue ; top : 0px ; left : 60px ; }

50%{background – color : pink ; top : 60px ; left : 60px ; }

70%{background – color : pink ; top : 60px ; left : 0px ; }

100%{background – color : white ; top : 0px ; left : 0px ; }

}

< / style>

< / head>

< body>

< div id=”animm”>

< / div>

< / body>

< / html>

Animation Speed :

We can manage the speed with the help of timing function in animation.

Syntax :

Animation – timing – funciton :

ease – it is default event it start slow and then fast and end slowly.

linear – it start and end with same speed.

ease – in – in this animation start with slow.

ease – out – in this animation end slow.

ease – in – out – in this animation end and start slow.

For more details and queries please feel free to email, visit or call us. Wishing you the very best for all your future endeavors.

Helpline: 9814666333, 8699444666

Email:info@technocampus.co.in

**************************************************************************************************************

Please fill the FORM and we shall contact you soon.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s