Property | Description |
---|---|
transition | The ‘transition’ Shorthand Property |
transition-property | A shorthand property for setting four individual transition properties in a single transition property. |
transition-delay | Delay for thetransition property. |
transition-duration | Specifies the number of seconds or milliseconds a transition animation should take to complete. |
transition-timing-function | The speed curve of the transition effect |
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Transition</title>
<style type="text/css">
.mouse_hover_btn{
color: #fff;
border: none;
padding: 15px 30px;
border-radius:2px;
font: bold 16px Arial, Helvetica, sans-serif;
background: #F60;
-webkit-transition: background 3s; /* For Safari 3.0 to 6.0 */
transition: background 3s; /* For modern or new browsers */
}
.mouse_hover_btn:hover {
background: #09F;
}
</style>
</head>
<body>
<button type="button" class="mouse_hover_btn">Mouse over Transition</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Transition Delay</title>
<style type="text/css">
.transition-delay{
width: 100px;
height: 40px;
background:#F60;
border-radius:4px;
padding:20px 0px;
color:#FFF;
text-align:center;
-webkit-transition: width 3s; /* Safari */
-webkit-transition-delay: 1s; /* Safari */
transition: width 3s;
transition-delay: 1s;
}
.transition-delay:hover {
width: 300px;
}
</style>
</head>
<body>
<div class="transition-delay">Transition Delay 1sec</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Transitions More Examples</title>
<style type="text/css">
.transition_example_1{
width: 100px;
height: 80px;
background:#F60;
border-radius:4px;
/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
/* Standard syntax */
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
}
.transition_example_1:hover {
width: 300px;
}
.transition_transformation{
width: 100px;
height: 100px;
background:#0099da;
border-radius:4px;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
transition: width 2s, height 2s, transform 2s;
}
.transition_transformation:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg); /* Safari */
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="transition_example_1"></div> <br />
<div class="transition_transformation"></div>
</body>
</html>