CSS transition

CSS transition changes (updates) the value of some CSS property from old to a new value within specific interval of time. This property occurs as a result of some event. This event may be onhover, onclick or an animation property.

<style>
.transition {
    transition-property: opacity, left, color;
    transition-duration: 2s, 2s, 2s;
    -webkit-transition-property: opacity, left, color;
    -webkit-transition-duration: 2s, 2s, 2s;
	width:200px;
	height:200px;
	background-color:lightblue;
	margin:10px;
	color:white;
	opacity:1;
	position:relative;
	left:0px;
  }
.transition:hover{
  opacity:0.4;
  left:100px;
  color:white;
}
.trotationB{
	width:200px;
	height:200px;
	perspective:300px;
	-webkit-perspective:300px;
}
.trotation{
	width:200px;
	height:200px;
	background-color:lightblue;
	margin:10px;
	transform:rotateY(0deg);
	transition:transform 5s;
	-webkit-transform:rotateY(0deg);
	-webkit-transition:-webkit-transform 5s;
}
.trotation:hover{
	transform:rotateY(360deg);
	-webkit-transform:rotateY(360deg);
}
</style>
<div style="width:100%; height:auto; float:left; clear:both;">
 <div style="width:220px; float:left;">
  <div class="transition">
   <p>The position, opacity and color of the text change on hover.</p>
  </div>
 </div>
 <div style="width:220px; float:left;">
  <div class="trotationB">
  <div class="trotation">
  web4college
  </div>
  </div>
 </div>
</div>

It is a shorthand property of transition-property, transition-duration, transition-delay, and transition-timing-function.

transition-property

It represents the CSS property that we want to change (update) from old to the new one. The value of this property may be any animatable property.

<style>
div{
  transition-property:color;
  color:red;
}
div:hover{
  color:blue;
}
</style>

In the above example, the value of transition-property is color of the text. When we hover the pointer over the <div> element, the color of the text changes from red to blue

More than vlaues can also be specified for the transition-property. All of the individual values are separated by comma.

<style>
div{
  transition-property:color,font-size,background-color;
  color:red;
  background-color:white;
  font-size:16px;
}
div:hover{
  color:white;
  background-color:red;
  font-size:20px;
}
</style>

transition-duration

transition-duration defines the duration in which the transition of CSS property occurs. The value of this property represents time in seconds.

<style>
div{
  transition-property:background-color;
  transition-duration:2s;
  background-color:red;
}
div:hover{
  background-color:blue;
}
</style>

The background-color change occurs from red to blue within 2s duration.

If more than values have been specified for the transition-duration, then corressponding values are specified in the same order.

<style>
div{
  transition-property:color,background-color;
  transition-duration:1s,5s;
  color:red;
  background-color:white;
}
div:hover{
  color:white;
  background-color:red;
}
</style>

The example shows that the color and background-color change with 1s and 2s respectively.

transition-timing-fuction

This property allows the transition property to change speed over the time.

<style>
div{
  position:relative;
  transition-property:top;
  top:0px;
  transition-duration:2s;
  transition-timing-function:ease-in;
}
div:hover{
  top:100px;
}
</style>

There are four values of transition-timing-fuction such as ease, ease-in, ease-out and ease-in-out.

transition-delay

It delays the execution of the transition property. It represents the time after which the transition property should begin.

<style>
div{
  position:relative;
  transition-property:font-size;
  font-size:16px;
  transition-duration:1s;
  transition-delay:2s;
}
div:hover{
  font-size:20px;
}
</style>

In the above example, the transition property should begin execution after 2s.