codescracker


css

CSS3 Animations



« Previous Tutorial Next Tutorial »


You can create simple animation to complex and interactive animation effects using CSS3.

CSS3 Animation Example

Here is an example, creates animation effects using CSS3:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Animation Example</title>
	<style> 
		div { width:100px; height:100px; background-color:blue;
			text-align:center;
			-webkit-animation-name:example;
			-webkit-animation-duration:4s;
			animation-name:example; animation-duration:4s; }
	
		/* Chrome, Safari, Opera */
		@-webkit-keyframes example { from { background-color:blue; }
			to {background-color:red; } }
	
		/* Standard syntax */
		@keyframes example { from { background-color:blue; }
			to { background-color:red; } }
	</style>
</head>
<body>

<div></div>

</body>
</html>

Here is the sample output of the above CSS3 animation example code:

css3 animation example

Here is the live demo output of the above CSS3 animation effect example. This animation starts on page load and finishes after 4 second of duration.

Here is another example, shows how to create animation effects using CSS3:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Animation Example</title>
	<style> 
		div { width:100px; height:100px; background-color:blue;
			text-align:center;
			-webkit-animation-name:example;
			-webkit-animation-duration:4s;
			animation-name:example; animation-duration:4s; }
		@-webkit-keyframes example {
			0%   {background-color:blue;}
			25%  {background-color:cyan;}
			50%  {background-color:green;}
			100% {background-color:red;} }
		@keyframes example {
			0%   {background-color:blue;}
			25%  {background-color:cyan;}
			50%  {background-color:green;}
			100% {background-color:red;} }
	</style>
</head>
<body>

<div></div>

</body>
</html>

Here is the live demo output produced by the above CSS3 example:

Note - Animations starts on page load, to watch it again, refresh your webpage (in sort, press F5 key).

CSS3 Delay an Animation

Here is an example shows how to delay an animation in CSS3:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Animation Example</title>
	<style> 
		div { width:100px; height:100px; background-color:blue; position:relative;
			-webkit-animation-name:example;
			-webkit-animation-duration:4s;
			-webkit-animation-delay:2s;
			animation-name:example; animation-duration:4s; animation-delay:2s; }
		@-webkit-keyframes example {
			0%   { background-color:blue; left:0px; top:0px; }
			25%  { background-color:cyan; left:200px; top:0px; }
			50%  { background-color:green; left:200px; top:200px; }
			75%  { background-color:violet; left:0px; top:200px; }
			100% { background-color:red; left:0px; top:0px; } }
		@keyframes example {
			0%   { background-color:blue; left:0px; top:0px; }
			25%  { background-color:cyan; left:200px; top:0px; }
			50%  { background-color:green; left:200px; top:200px; }
			75%  { background-color:violet; left:0px; top:200px; }
			100% { background-color:red; left:0px; top:0px; } }
	</style>
</head>
<body>

<div></div>

</body>
</html>

Here is the live demo output produced by the above CSS3 animation effect (shows how to delay an animation) example code:

CSS3 Set Animation Repetition Time

Here is an example shows how to set animation repetition time using CSS3:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Animation Effect Example</title>
	<style> 
		div { width:100px; height:100px; background-color:blue;
			position:relative;
			-webkit-animation-name:example;
			-webkit-animation-duration:2s;
			-webkit-animation-iteration-count:10;
			animation-name:example; animation-duration:2s;
			animation-iteration-count:10; }
		@-webkit-keyframes example {
			0%   { background-color:blue; left:0px; top:0px; }
			25%  { background-color:cyan; left:200px; top:0px; }
			50%  { background-color:green; left:200px; top:200px; }
			75%  { background-color:violet; left:0px; top:200px; }
			100% { background-color:red; left:0px; top:0px; } }
		@keyframes example {
			0%   { background-color:blue; left:0px; top:0px; }
			25%  { background-color:cyan; left:200px; top:0px; }
			50%  { background-color:green; left:200px; top:200px; }
			75%  { background-color:violet; left:0px; top:200px; }
			100% { background-color:red; left:0px; top:0px; } }
	</style>
</head>
<body>

<div></div>

</body>
</html>

Following is the demo output of the above CSS3 animation effect example code:

CSS3 Create Animation Run Forever

Here is an example shows how to create an animation that runs forever (infinite) using CSS3:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Animation Effect Example</title>
	<style> 
		div { width:100px; height:100px; background-color:blue;
			position:relative;
			-webkit-animation-name:example;
			-webkit-animation-duration:2s;
			-webkit-animation-iteration-count:infinite;
			animation-name:example; animation-duration:2s;
			animation-iteration-count:infinite; }
		@-webkit-keyframes example {
			0%   { background-color:blue; left:0px; top:0px; }
			25%  { background-color:cyan; left:200px; top:0px; }
			50%  { background-color:green; left:200px; top:200px; }
			75%  { background-color:violet; left:0px; top:200px; }
			100% { background-color:red; left:0px; top:0px; } }
		@keyframes example {
			0%   { background-color:blue; left:0px; top:0px; }
			25%  { background-color:cyan; left:200px; top:0px; }
			50%  { background-color:green; left:200px; top:200px; }
			75%  { background-color:violet; left:0px; top:200px; }
			100% { background-color:red; left:0px; top:0px; } }
	</style>
</head>
<body>

<div></div>

</body>
</html>

Here is the live sample output of the above CSS3 animation (runs forever) example code:


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test