Html & Html5

The World's best Software Development Study Portal


Introduction to CSS

CSS Animation

This property is used to create the animation onto the webpage. New-new effects we can design from this animation property. Basically it can change the behaviour gradually from one style to another. Many more properties we can add here through this animation property.

But there are certain rules to add animation which are listed below:-

1. Firstly an element we have to bound up with the animation by specifying the name of the animation and by the duration.

2. Than inside the &keyframes we used to control the steps for the animation property.

3. And than just we have to specify the changes inside 0% to 100%

Let's understand this by the following program:-

<!DOCTYPE html>




div {

       width: 100px;

      height: 100px;

      background-color: red;

      animation: anyname 5s;


@keyframes anyname {

      from {background: red;}

      to {background: green;}





<p> We can set cool animations like this, through this property. </p>



Output of the Program

So in this way can give animation to our elements.

Like this some more properties are listed below with their description

Property Description
animation This is a shorthand property, used for setting all the properties, except the animation-play-state and the animation-fill- mode property.
@keyframes It is used to specify the 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-direction It specifies if or not the animation should play in reserve on alternate cycle.
animation-fill-mode it specifies the static style of the element. (when the animation is not playing)
animation-iteration-count It specifies the number of times the animation should be played
animation-name It specifies the name of @keyframes animation.
animation-play-state It specifies if the animation is running or paused.
animation-timing-function It specifies the speed curve of the animation.

CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute