CSS Transitions

CSS transitions allows the HTML element to animate between CSS style values with the use of certain triggers (function timers, mouse actions, and other attributes).

Below, is an example of two different tranistions that are triggered by :hover.




CSS CODE

<style>
.firstDiv, .secondDiv{
background:red;
width:200px;
height:200px;
-webkit-transition: background 1s; /* Safari */
transition: background 1s;
clear:both;
}

.firstDiv:hover{
background:green;
cursor:pointer;

}

.secondDiv{
/* Firefox */
-moz-transition: all 1s ease;
/* WebKit */
-webkit-transition: all 1s ease;
/* Opera */
-o-transition: all 1s ease;
/* Standard */
transition: all 1s ease;
margin-left:100px;
background:blue;
}

.secondDiv:hover{
/* Firefox */
-moz-transform: scale(2) rotate(30deg) translate(50px);
/* WebKit */
-webkit-transform: scale(1.2) rotate(30deg) translate(50px);
/* Opera */
-o-transform: scale(2) rotate(30deg) translate(50px);
/* Standard */
transform: scale(2) rotate(30deg) translate(50px);
}
.codeBox { width:auto;
height:auto;
border:1px solid black;
background:transparent;
}
</style>


HTML Code



<div class="firstDiv"></div>
<div class="secondDiv"></div>
<div class="codeBox">