codescracker


css

CSS3 Transitions



« Previous Tutorial Next Tutorial »


CSS3 Transition Demo

CSS3 Transition Demo

You are free to create transition effects using CSS3

CSS3 Code to Create Transition

Here is the simple code to create transition 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:

<!DOCTYPE html>
<html>
<head>
<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 live demo output of the above CSS3 example. Just place your mouse cursor over the Hover Me box:

Hover Me

Here is another example also creates transition using CSS3:

<!DOCTYPE html>
<html>
<head>
<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>

It will produce the following output:

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>
<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 example. Just place your mouse's cursor over it to watch the transition effect:

Hover Me

Hover Me

Hover Me

Hover Me

Hover Me

CSS3 Delay Transition Effect

Here is an example on CSS3 delay transition effect:

<!DOCTYPE html>
<html>
<head>
<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>

It will display the following result, place your mouse's cursor over it:

Hover Me

CSS3 Transition and Transformation

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

<!DOCTYPE html>
<html>
<head>
<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 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