CSS3 Transition Tutorial And CSS3 Transition Reference

Published on: September 9, 2014   Last Updated on : June 5, 2018   Posted By : WebDesignReference

CSS3 Transition : 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 : CSS3 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 CSS3 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;
}

Also Related to CSS3

 

Leave a Reply