Scribd
Upload
4 views

Animation in CSS - CN

CSS

Uploaded by

laptopbackup66
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Animation in CSS - CN

CSS

Uploaded by

laptopbackup66
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Animation in CSS

Overview
CSS Animation property is used to create animation on the webpage. It can be used as a
replacement for animation created by Flash and JavaScript. An animation lets an
element gradually change from one style to another.

Animation can change as many CSS properties, as many times.

Property Description

@keyframes Used to specify the animation.

animation-name It specifies the name of @keyframes animation.

animation-duration It specifies the time duration taken by the animation to


complete one cycle.

animation-delay It specifies when the animation will start.

animation-iteration-count It specifies the number of times the animation should be


played.

animation-direction It specifies if or not the animation should play in reserve on


an alternate cycle.

animation-timing-function It specifies the speed curve of the animation.

animation This is a shorthand property, used for setting all the


properties, except the animation-play-state and the
animation-fill- mode property.

animation-play-state It specifies if the animation is running or paused.

1
@keyframes rule
Animation is created with a specific name and then its functionality is described using
the @keyframes rule. We need to mention the animation from and to.
Let’s take an example where a square div changes its shape to a circle.

HTML : <div> </div>


CSS : div{
height: 100px;
width: 100px;
border:2px solid black ;
animation-name: sample ;
animation-duration: 5s ;
}

@keyframes sample{
from{border-radius: 0;}
to{border-radius: 50%;}
}

Before : After :

NOTE : If the animation-duration property is not specified, no animation will occur,


because the default value is 0 seconds and animation occurring for 0 seconds means no
animation.

Animation at stages
In the above example, we transformed a square to a circle with animation that you
cannot see in this doc but you must try the code in your editor and see the results on
the browser. We can also make multiple changes in animation with time

Let’s see that with an example where the animation duration is 3 seconds and at each
second colour of the div changes.

2
CSS : div {
width: 100px;
height: 100px;
background-color: red;
animation-name: sample;
animation-duration: 3s;
}

@keyframes sample {
0% {background-color: red;}
50% {background-color: blue;}
100% {background-color: green;}
}

1st second : 2nd second: 3rd second:

animation-iteration-count
This property specifies the number of times animation should play.

In the below example the square changes to circle 3 times just like a loop.

HTML : <div> </div>


CSS : div{
height: 100px;
width: 100px;
border:2px solid black ;
animation-name: sample ;
animation-duration: 5s ;
animation-iteration-count: 3 ;
}

@keyframes sample{
from{border-radius: 0;}
to{border-radius: 50%;}
}

3
Animation direction
This property specifies if or not the animation should play in reserve on an alternate
cycle or normally.

● normal : Animation is played as normal (Default)


● reverse : Animation is played in the reverse direction (backwards)
● alternate : Animation is played forwards first, then backwards
● alternate-reverse : The animation is played backwards first, then forwards

In the below example technically square should have been converted into a circle but
after applying the property “animation-direction : reverse”, the circle is converted to
a sqaure.

CSS : div{
height: 100px;
width: 100px;
border:2px solid black ;
animation-name: sample ;
animation-duration: 5s ;
animation-direction : reverse ;
}

@keyframes sample{
from{border-radius: 0;}
to{border-radius: 50%;}
}

Animation timing function


This property specifies the speed curve of the animation. It is the same as the transition
timing function.

● ease : Animation with a slow start, then fast, then end slowly (Default)
● linear : Animation with the same speed from start to end
● ease-in : Animation with a slow start
● ease-out : Animation with a slow end
● ease-in-out - Animation with a slow start and end
● cubic-bezier(n,n,n,n) : Define own values in a cubic-bezier function

4
Animation Shorthand Property
Example :

You might also like