codescracker


css

CSS3 Transitions



« Previous Tutorial Next Tutorial »


CSS3 Transition Demo

CSS3 Transition

You are free to create transition effects using CSS3.

CSS3 Code to Create Transition

Here is the simple code to create transition effect using CSS3:

div { width:200px; height:200px; background:green;
    -webkit-transition:width 5s; /* for Safari browser */
    transition:width 5s; }

CSS3 Transition Example

Here is an example shows how to create CSS3 transition effect:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Transition Effect Example</title>
	<style> 
		div { width:200px; height:50px; background:blue;
			color:white; text-align:center; font-size:40px;
			-webkit-transition:width 1s; /* For Safari 3.1 to 6.0 */
			transition:width 1s; }
		div:hover { width:400px; }
	</style>
</head>
<body>

<div>Hover Me</div>

</body>
</html>

Here is the sample output of the above transition effect example using CSS3:

css3 transition example

Here is the live demo output of the above CSS3 transition effect example code. Just place your mouse cursor over the Hover Me box to watch the transition effect created using CSS3:

Hover Me

Here is another example also creates transition effect using CSS3:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Transition Effect Example</title>
	<style> 
		div { width:200px; height:50px; background:blue;
			color:white; font-size:150%; text-align:center;
			-webkit-transition:width 2s, height 4s; /* For Safari 3.1 to 6.0 */
			transition:width 2s, height 4s; }
		div:hover { width:300px; height:300px; }
	</style>
</head>
<body>

<div>Hover Me</div>

</body>
</html>

Below is the live demo output produced by the above CSS3 transition example code:

Hover Me

CSS3 Specify Speed Curve of Transition

Here is an example shows how to specify the speed curve of the transition using CSS3:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Transition Effect Example</title>
	<style> 
		div { width:100px; height:50px; background:blue; color:white;
			-webkit-transition:width 2s; /* Safari */
			transition:width 2s; }
	
		/* For Safari 3.1 to 6.0 */
		#div1 {-webkit-transition-timing-function:linear;}
		#div2 {-webkit-transition-timing-function:ease;}
		#div3 {-webkit-transition-timing-function:ease-in;}
		#div4 {-webkit-transition-timing-function:ease-out;}
		#div5 {-webkit-transition-timing-function:ease-in-out;}
	
		/* Standard syntax */
		#div1 {transition-timing-function:linear;}
		#div2 {transition-timing-function:ease;}
		#div3 {transition-timing-function:ease-in;}
		#div4 {transition-timing-function:ease-out;}
		#div5 {transition-timing-function:ease-in-out;}

		div:hover { width:400px; }
	</style>
</head>
<body>

<div id="div1">Hover Me</div><br>
<div id="div2">Hover Me</div><br>
<div id="div3">Hover Me</div><br>
<div id="div4">Hover Me</div><br>
<div id="div5">Hover Me</div><br>

</body>
</html>

Here is the live demo output produced by the above CSS3 transition effect (specify speed curve) example code. Just place your mouse's cursor over the Hover Me box to watch the transition effect:

Hover Me

Hover Me

Hover Me

Hover Me

Hover Me

CSS3 Delay Transition Effect

Here is an example shows how to delay transition effect on mouse hover using CSS3:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Transition Effect Example</title>
	<style> 
		div { width:100px; height:50px; background:blue; color:white;
			-webkit-transition:width 3s; /* Safari */
			-webkit-transition-delay:1s; /* Safari */
			transition:width 3s; transition-delay:1s; }
		div:hover { width:400px; }
	</style>
</head>
<body>

<div>Hover Me</div>

</body>
</html>

Following is the live demo output of the above CSS3 transition effect (shows how to delay transition effect using CSS3) example code:

Hover Me

CSS3 Transition and Transformation

Here is an example, creates transition as well as transformation effects using CSS3:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Transition and Transformation Effects Example</title>
	<style> 
		div { width:100px; height:100px; color:white; text-align:center; background:blue;
			-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */
			transition:width 2s, height 2s, transform 2s; }
		div:hover { width:400px; height:400px;
			-webkit-transform: rotate(360deg); /* Safari */
			transform:rotate(360deg); }
	</style>
</head>
<body>

<div>Hover Me</div>

</body>
</html>

Here is the live sample output of the above CSS3 transition and transformation effects example. Just place your mouse cursor over the Hover Me box to watch the transition and transformation effect at the same time:

Hover Me

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test