CSS training institute in delhi NCR & gurgaon | HTML, CSS training classes in gurgaon

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>

<html>

<head>

<style>

div {

     width: 100px;

      height: 100px;

      background-color: red;

      animation: anyname 5s;

}

@keyframes anyname {

      from {background: red;}

      to {background: green;}

}

</style>

</head>

<body>

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

</body>

</html>

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