CSS3 Transition
The CSS3 transitions are effects that allows to change property's values smoothly from one value to another, in a specified duration. These effects changes the element's property gradually from one style to another, without using flash or JavaScript.
There are two things you need to specify to create a transition :
- CSS property you want to add an effect to.
- Time duration.
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3D Transition </title>
<meta charset="UTF-8">
<style>
button {
color: #fff;
border: none;
padding: 10px 20px;
font: bold 18px sans-serif;
background: #da6e18bd;
-webkit-transition: background 2s; /* For Safari 3.0 to 6.0 */
transition: background 2s; /* For modern browsers */
}
button:hover {
background: seagreen;
}
</style>
</head>
<body>
<button type="button">Hover on me</button>
</body>
</html>
<html lang="en">
<head>
<title> CSS 3D Transition </title>
<meta charset="UTF-8">
<style>
button {
color: #fff;
border: none;
padding: 10px 20px;
font: bold 18px sans-serif;
background: #da6e18bd;
-webkit-transition: background 2s; /* For Safari 3.0 to 6.0 */
transition: background 2s; /* For modern browsers */
}
button:hover {
background: seagreen;
}
</style>
</head>
<body>
<button type="button">Hover on me</button>
</body>
</html>
Output
In the example below, the width of the element is increased under hover. The transition time value is also given which will specify the time of the transition in which it will get completed. If you take mouse cursor out of the element, it gains its original style slowly.
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3D Transition </title>
<meta charset="UTF-8">
<style>
div {
width: 100px;
height: 100px;
background: #758bbd;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
<html lang="en">
<head>
<title> CSS 3D Transition </title>
<meta charset="UTF-8">
<style>
div {
width: 100px;
height: 100px;
background: #758bbd;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
Output
Hover over the div element above, to see the transition effect.
Transition + Transformation
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3D Transition + Transform </title>
<meta charset="UTF-8">
<style>
div {
width: 100px;
height: 100px;
background: #555d18de;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 300px;
height: 300px;
-webkit-transform: rotate(180deg); /* Safari */
transform: rotate(180deg);
}
</style>
</head>
<body>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
<html lang="en">
<head>
<title> CSS 3D Transition + Transform </title>
<meta charset="UTF-8">
<style>
div {
width: 100px;
height: 100px;
background: #555d18de;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 300px;
height: 300px;
-webkit-transform: rotate(180deg); /* Safari */
transform: rotate(180deg);
}
</style>
</head>
<body>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
Output
| Property | Description |
|---|---|
| transition | It is a shorthand property to set all the four individual transition properties below in a single declaration. |
| transition-delay | It specify the time-period after which the transition will start. |
| transition-duration | It specify the time-period of the transition animation to get completed. |
| transition-property | It specify the name of the CSS property to which a transition effect should be applied. |
Browser Support
 Edge |
 Chrome |
 Firefox |
 Opera |
 Safari |
|
|---|---|---|---|---|---|
Transition |
Recommended :