Advertisement

Advertisement


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.

<!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>

Output

CSS 3D Transition

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.


<!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>

Output

CSS 3D Transition

Hover over the div element above, to see the transition effect.


Transition + Transformation


<!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>

Output

CSS 3D Transition + Transform

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

Property
Microsoft Edge browser.png Edge
Chrome browser.png Chrome
Firefox browser.png Firefox
Opera browser.png Opera
safari browser.png Safari
Transition
Yes
Yes
Yes
Yes
Yes









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.