CSS Property transition








The transition property is a shorthand property to represent four transition-related longhand properties: 

.example {
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

Summary

Initial value
all 0 ease 0
Inherited
no
CSS Version
JavaScript syntax
object.style.transition="all 2s"
Animatable
no

CSS Syntax

transition: property duration timing-function delay|initial|inherit;

Property Values

transition-property
the name of the CSS property to animate>
transition-duration
seconds or milliseconds for the transition to complete
transition-timing-function
the speed curve of the transition
transition-delay
when the transition effect will start




Browser compatibility

transition Yes 10.0 Yes Yes Yes

Example

<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--   w ww  . j a  v  a 2 s. c  om-->
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari 3.1 to 6.0 */
}

div:hover {
    width: 300px;
}
</style>
</head>
<body>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>
</html>

Click to view the demo





Example 2

<!DOCTYPE html>
<html>
<style>
.box {<!-- w w w  . j a v a 2  s. c  o m-->
  width: 150px;
  height: 150px;
  background: red;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}

.box:hover {
  background-color: green;
  cursor: pointer;
}
</style>
</head>
<body>
<div class="box">hover me</div>
</body></html>

Click to view the demo