Google News
logo
CSS3 Transitions
The CSS3 transition property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It enables you to define the transition between two states of an element. 
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
CSS3 Transitions Example :
<!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> 
Output :
Transition Delay Example :
<!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> 
Output :
Transition Delay 1sec
Transition More Examples :
<!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>  
Output :