Home >>CSS Tutorial >CSS Animation

CSS Animation

CSS Animation

The CSS animation is used to control the elements by changing their motions or display. CSS animation is a technique to change the appearance and behavior of various elements in web pages. It is he process of creating motion effects and change the appearance on the web pages. The CSS Animation contains two parts, one which contains the CSS properties which describes the animation of the elements and the other is certain keyframes which indicates the animation properties of the element at the specific time intervals which the animations have occur. It can be used as a replacement of animation created by JavaScript and flash.

The @keyframes rule:It is used to control the respective stages of its whole duration and also used to control the intermediate steps in a CSS animation sequence. For Example: The heading changes it’s color with time. At 0% completion it is orange, at 50% completion it is of green color and full completion i.e. at 100% it is blue. It will gradually changes the current style to the new style.

Let's take an Example of CSS Animation:

<!DOCTYPE html> 
<html> 
	<head> 
		<style> 
			#phptpoint { 
				animation-name: changebg;
               -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
                animation-iteration-count: infinite;				
				animation-duration: 10s; 
				padding-top:30px; 
				padding-bottom:30px; 
			} 
			#php { 
				font-size: 40px; 
				text-align:center; 
				font-weight:bold; 
				color:#090; 
				color:#fff;
				padding-bottom:5px; 
			} 
			#php1 { 
				font-size:17px; 
				font-weight:bold;
                color:#fff;				
				text-align:center; 
			} 
			@keyframes changebg { 
				0% { 
					background-color: #f5a92f; 
				} 
				50% { 
					background-color: #afed64; 
				} 
				100% { 
					background-color: #66dbed; 
				} 
			} 
		</style> 
	</head> 
	<body> 
		<div id = "phptpoint"> 
			<div id = "php">Phptpoint</div> 
			<div id = "php1">welcome to phptpoint</div> 
		</div> 
	</body> 
</html>	
Output:
Phptpoint
welcome to phptpoint

CSS animation properties

Property Description
@keyframes It is used to specify the animation code to an element.
Animation This is a shorthand property, used for setting all the animation properties.
Animation-delay It specifies delay when the animation will start.
Animation-duration It specifies how long time duration should take to complete one cycle.
Animation-iteration-count It specifies that how many times an animation should be played with the number of times.
Animation-direction It specifies if an animation should be play in reserve or in alternate cycles.
Animation-fill-mode It specifies the static style when the animation is not playing in an element (before it starts, after it ends, or both).
Animation-play-state It defines whether the animation is running or paused.
Animation-name It defines the name of @keyframes animation.
Animation-timing-function It defines the animation speed curve.

CSS Animation Example: up And down Text

Let's take another example of animation-duration :

<!DOCTYPE html> 
<html> 
	<head> 
		<style> 
			#animate { 
				animation-name: textmove; 
				animation-duration: 5s; 
				animation-iteration-count: infinite; 
				} 
			#animate1 { 
				font-size: 40px; 
				text-align:center; 
				font-weight:bold; 
				color:#090; 
				padding-bottom:5px; 
			} 
			#animate2 { 
				font-size:17px; 
				font-weight:bold; 
				text-align:center; 
			} 
			@keyframes textmove { 
				
				from { 
					
					margin-top: 400px; 
				} 
				to { 
					margin-top: 0px; 
				} 
			} 
		</style> 
	</head> 
	<body> 
		<div id = "animate"> 
			<div id = "animate1">PHPTPOINT</div> 
			<div id = "animate2">Hello world</div> 
		</div> 
	</body> 
</html>	
Output:
PHPTPOINT
Hello world

Animation Shorthand Property

CSS shorthand property is used to shorten the code.

Let's take an example of animation shorthand property :

<!DOCTYPE html>
<html>
<head>
<style> 
div.shorthand {
  width: 100px;
  text-align:center;
  font-weight:bold;
  height: 100px;
  background-color: #a7ed37;
  position: relative;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-name: movebox;
  -webkit-animation-duration: 5s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  /* Standard syntax */
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes movebox {
  0%   {background-color:#c46ff2; left:0px; top:0px;}
  25%  {background-color:#f556e5; left:200px; top:0px;}
  50%  {background-color:#5de8cc; left:200px; top:200px;}
  75%  {background-color:#e81a4d left:0px; top:200px;}
  100% {background-color:#c46ff2; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes example {
  0%   {background-color:#c46ff2; left:0px; top:0px;}
  25%  {background-color:#f556e5; left:200px; top:0px;}
  50%  {background-color:#5de8cc; left:200px; top:200px;}
  75%  {background-color:#e81a4d; left:0px; top:200px;}
  100% {background-color:#c46ff2; left:0px; top:0px;}
}
</style>
</head>
<body>
<div class="shorthand">PHPTPOINT</div>
</body>
</html>
Output:


PHPTPOINT

Popular Tutorials