Css3 Transition Tutorial And Reference

Published on: September 9, 2014   Last Updated on : December 7, 2014   Posted By : WebDesignReference

Css3 Transitions : with the use of css3 transition property we can easily add an effect to an element when it change from one style to an other style without using any javascript or flash script.

Properties of Css3 Transition :

  • Transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Changing some properties of an element with Css3 Transition Effect :

Hover Me
Transition Example

Example : Css Transition Property.

.example-div {
width: 150px;
height: 100px;
background: #16a085;
color: #fff;
padding-top 20px;
-webkit-transition: background 1s,color 1s,width 1s,height 1s;
transition-property: background,color,width,height;
transition-duration: 1s,1s,1s,1s;
}

.example-div:hover {
background: #1ec7e6;
width: 200px;
height: 110px;
color: brown;
}

Changing multiple properties of an element with Css3 Transition Effect :

CSS3
Transition Example

Example : use of Css Transition Property.

.animated-box {
width: 150px;
height: 100px;
padding: 10px;
float: left;
background: #16a085;
color: #fff;
position: absolute;
font-weight: bold;
font-size: 25px;
margin: 5px;
-webkit-border-radius: 5px;
-webkit-transition: -webkit-transform 1s,opacity 1s,background 1s,color 1s,width 1s,height 1s,font-size 1s;
border-radius: 5px;
opacity: 0.8;
text-shadow: 1px 0px 2px #000;
}

.animated-box:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
opacity: 0.9;
background: #1ec7e6;
width: 200px;
height: 100px;
font-size: 30px;
color: brown;
}

 

Leave a Reply