</Animation Property>

How to use animation property on your web page?

Animation property gives attractive look to your website. We can use multiple animation at a time on an HTML element.

Here we will discuss about
- @keyframes
- animation-name
- animation-delay
- animation-duration
- animation-iteration-count
- animation-timing-function
- animation-direction
- animation-fill-mode
- animation

These values allow us to add different animation effects on our web page.


	<style>
	.tdb-block{
        padding:5px 10px;
        width:100px;
        height:50px;
        background-color:black;
        animation:animation-name 1s;
      }
      /* animation @keyframe rule */
      @keyframes animation-name {
        from {margin-left: 0px}
        to {margin-left: 250px;}
      }
	</style>

	<div class="tdb-block">tdb-block</div>

Try it Yourself

Animation @keyframes rules

First we have to specify some keyframes for the animations. Keyframes allow to hold CSS styles for a specific duration.


<style>
/* animation @keyframe rule */
@keyframes example {
  from {property: value}
  to {property: value;}
}
</style>

We can also specify multiple CSS3 properties during animation


<style>
/* multiple animation effects */
@keyframes animation-name {
  0%   {margin-left: 0px;}
  20%  {margin-left: 100px;}
  30%  {margin-left: 50px;} 
  50% {margin-left: 200px;}
  80% {margin-left: 100px;}
  100% {margin-left: 250px;}
}
</style>


	

<head>
	<style>
	.tdb-block{
        padding:5px 10px;
        width:100px;
        height:50px;
        background-color:black;
        animation:animation-name 1s;
      }
      /* animation @keyframe rule */
@keyframes animation-name {
  0%   {margin-left: 0px;}
  20%  {margin-left: 100px;}
  30%  {margin-left: 50px;} 
  50% {margin-left: 200px;}
  80% {margin-left: 100px;}
  100% {margin-left: 250px;}
}
	</style>
</head>

<body>
	<div class="tdb-block">tdb-block</div>
</body>

Try it Yourself

Other Animation Properties

We can also use other values used in animation.

animation-delay
CSS3 animation-delay property is used to add a delay for the start of an animation.


<style>
/* animation delay*/
.tdb-animation{
  animation-name: tdb-animation;
  animation-duration: 4s;
  animation-delay: 5s;
}
/*now the animation will start after 5 seconds */
</style>

animation-iteration-count propety;
CSS3 animation-iteration-count property is used to specify how many times an animation should run.


<style>
/*animation-iteration-count*/
.tdb-animation{
  animation-iteration-count: 5 /*or infinite*/;
}
/*the animation will run for 5 times */
</style>

animation timing function;
CSS3 animation-iteration-count property is used to specify how many times an animation should run.


<style>
/*animation timing function*/
.tdb-animation{
	animation-timing-function: linear;
}
</style>


	
<!DOCTYPE html>
<html>
<head>
	<style>
	.tdb-block
	{
        padding:5px 10px;
        width:100px;
        height:50px;
        background-color:black;
        animation:animation-name 1s;
		animation-delay: 1s;
		animation-iteration-count: 5;
		animation-timing-function: linear;
      }

      /* animation @keyframe rule */
@keyframes animation-name 
{
  0%   {
	  margin-left: 0px;
	  }
  20%  {
	  margin-left: 100px;
	  }
  30%  {
	  margin-left: 50px;
	  } 
  50% {
	  margin-left: 200px;
	  }
  80% {
	  margin-left: 100px;
	  }
  100% {
	  margin-left: 250px;
	  }
}
	</style>
</head>

<body>
	<div class="tdb-block">tdb-block</div>
</body>
<html>

Try it Yourself

animation-direction
CSS3 animation-direction property is used to specify the direction on the animation.

Syntax
animation-direction: normal | reverse | alternate | alternate-reverse;


<style>
/* animation delay*/
.tdb-animation{
  animation-name: tdb-animation;
  animation-duration: 4s;
  animation-direction: normal | reverse | alternate 
  | alternate-reverse;	
}
</style>

animation fill-mode
CSS3 animation-fill-mode property is used to specify the final position of an animated HTML element. It has 3 important values (forwards, backwards, both).


<style>
/*animation-iteration-count*/
.tdb-animation{
  animation-iteration-count: 5;
  animation-fill-mode: backward;
}
</style>

animation shorthand property
CSS3 animation is a shorthand animation property in which we can specify all css property in one property.

SYNTAX
animation: animation-name duration timing-function delay iteration-count direction fill-mode play-state;


<style>
/*animation timing function*/
.tdb-animation{
	animation: tdb-animation 10s linear 5s 3 forward;
}
</style>


<!DOCTYPE html>
<html>
<head>
	<style>
	.tdb-block
	{
        padding:5px 10px;
        width:100px;
        height:50px;
        background-color:black;
        animation:animation-name 1s;
		animation-direction: normal;
		animation-fill-mode: backward;
		animation-delay: 1s;
		animation-iteration-count: 5;
		animation-timing-function: linear;
		animation-direction: normal;
		animation-fill-mode: backward;
      }
	  .animation{
		animation: tdb-animation 5s linear;
		padding:5px 10px;
        width:100px;
        height:50px;
		background-color:orange;
	  }
	
@keyframes tdb-animation
{
  0%   {
	  margin-left: 0px;}
  100%  {
	  margin-left: 250px;}
}

@keyframes animation-name 
{
  0%   {
	  margin-left: 0px;}
  100%  {
	  margin-left: 250px;}
}
	</style>
</head>

<body>
	<div class="tdb-block">tdb-block</div></br>
	<div class="animation">tdb-block</div>
</body>
<html>

Try it Yourself

CSS3 ANIMATIONS

</CSS3 ANIMATION PROPERTY>

</Animation Property>

How to use animation property on your web page?

Animation @keyframes rules

Other Animation Properties