6-Awesome CSS Transition effects - with DEMO

"css transition is a property that changes other property of css in given time of duration with a timing function"

 How we can implement css transition                  

To use css transition these few codes must be remember :-

1. transition-property:width,height,all;
2. transition-duration:2s,4s,5s;
3. transition-timing-function:ease,linear,ease-in;
4. transition-delay:1s,0s,2s; 

we can also implement all these property in single code:-

transition : width 2s ease;  transition for other property can also implemented in same way.

Every browser have their different transition code see below.

for opera :     -o-transition:width 3s ease-out;
for chrome :    -webkit-transition:height 4s ease-in;
for mozilla :     -moz-transition: border 6s linear;
       

 Examples of css transition                                       

    1.Search box width change       

Live Preview

HTML Code :

"<input class="inwidth" placeholder="Search.."  type="text" />"

CSS Code :

input.inwidth
 {
-webkit-transition-property:width,border;
-webkit-transition-duration:2s,2s;
-webkit-transition-timing-function:ease,ease-in;
-moz-transition-property:width,border;
-moz-transition-duration:2s,2s;
-moz-transition-timing-function:ease,ease-in;
-o-transition-property:width,border;
-o-transition-duration:2s,2s;
-o-transition-timing-function:ease,ease-in;
width:200px;
border-radius:40px;
border:3px solid orange;
height:50px;
}
input.inwidth:hover{
width:300px;
border-color: blue;
}

    2.Border-radius Transition      

Live Preview

HTML Code :


"<div id="div"></div>"

CSS Code :


#div
{
width: 200px;
height: 200px;
background-color: maroon;
-webkit-transition-property:border-radius,border;
-webkit-transition-duration:1s,1s;
border-radius:none;
border:10px dotted graytext;
}
#div:HOVER {
border-radius:400px;
border:10px double white;
}



    3.Box-Shadow Transition      

Live Preview

HTML Code :

"<div id="div"></div>"

CSS Code :


#div
{
width: 200px;
height: 200px;
background-color: maroon;
-webkit-transition-property:box-shadow,background-color,border;
-webkit-transition-duration:1s,0.2s,0.2s;
box-shadow:none;
border:none;   
 }
#div:hover {
box-shadow:1px 2px 1px rgb(116, 28, 28),2px 1px 1px rgb(129, 56, 56),
  2px 3px 1px rgb(116, 28, 28),3px 2px 1px rgb(129, 56, 56),
  3px 4px 1px rgb(116, 28, 28),4px 3px 1px rgb(129, 56, 56),
  4px 5px 1px rgb(116, 28, 28),5px 4px 1px rgb(129, 56, 56),
                    5px 6px 1px rgb(116, 28, 28),6px 5px 1px rgb(129, 56, 56),
                    6px 7px 1px rgb(116, 28, 28),7px 6px 1px rgb(129, 56, 56),
                    7px 8px 1px rgb(116, 28, 28),8px 7px 1px rgb(129, 56, 56),
  9px 8px 1px rgb(116, 28, 28),8px 9px 1px rgb(129, 56, 56),
  10px 9px 1px rgb(116,28,28),9px 10px 1px rgb(129,56,56);
 background-color:white;
 border:4px solid maroon;
}



    4.Opacity Transition      

Image of Nature,a crop of harvesting life of humans in nature for sacrifice & beauty to be wildest

Image of Nature,a crop of harvesting life of humans in nature for sacrifice & beauty to be wildest

Live Preview

HTML Code :


" <div id="bod" style="position: absolute;"><img id="image" alt="" src="http://2.bp.blogspot.com/-XAh91eKU8-
0/UQAUxbNbL7I/AAAAAAAABIY/rkeSwRxv0tU/s1600/06_background_tutorials.jpg" width="100px" height="100px">
<div id="des">Image of Nature,a crop of harvesting life of humans in nature for sacrifice &amp; beauty to be wildest</div></div>
<div id="bod" style="position:absolute;margin-left:250px; ">
<img id="image1" alt="" src="http://2.bp.blogspot.com/-
2AZkY8j3Ddk/UQAUzzP63QI/AAAAAAAABIg/h3hJnUCn_hE/s1600/08_background_tutorials.jpg" width="100px" height="100px">
<div id="des">Image of Nature,a crop of harvesting life of humans in nature for sacrifice &amp; beauty to be wildest</div></div> "

CSS Code :


#image
{
opacity:0.2;
-webkit-transition:opacity 1s ease-in;
-moz-transition:opacity 1s ease-in;
-o-transition:opacity 1s ease-in;
}
#image:HOVER { opacity:1;}
#image1{
opacity:0.2;
border:none;
-webkit-transform:rotateZ(0deg);
-moz-transform:rotateZ(0deg);
-o-transform:rotateZ(0deg);
-webkit-transition-property:opacity,transform,box-shadow;
-moz-transition-property:opacity,transform,box-shadow;
-o-transition-property:opacity,transform,box-shadow;
-webkit-transition-duration:1s,1s,1s;
-moz-transition-duration:1s,1s,1s;
-o-transition-duration:1s,1s,1s;
}
#image1:HOVER { opacity:1;
-webkit-transform:rotateZ(10deg);
-moz-transform:rotateZ(10deg);
-o-transform:rotateZ(10deg);
box-shadow:2px 3px 5px grey;
}
#des
{width: 100px;
height: auto;}
#bod
{opacity:0.4;
width: 110px;
padding:10px;
border:20px dotted purple;  
-webkit-transition-property:opacity;
-moz-transition-property:opacity;
-o-transition-property:opacity;
-webkit-transition-duration:3s;
-moz-transition-duration:3s;
-o-transition-duration:3s;
}
#bod:HOVER {
opacity:1.0; }

    5.3D-effect Transition      

click on submit!

Live Preview

HTML Code :

 " <div>
<input id="div" type="button" value="SUBMIT" style="color:white;font-family:impact;font-size:50px;" ></div> "

CSS Code :


#div
{
width: 200px;
height: 100px;
background-color: #4e68c7;
box-shadow:
1px 0px 1px #203891,0px 1px 1px #3852b1,
2px 1px 1px #203891,1px 2px 1px #3852b1,
3px 2px 1px #203891,2px 3px 1px #3852b1,
4px 3px 1px #203891,3px 4px 1px #3852b1,
5px 4px 1px #203891,4px 5px 1px #3852b1,
6px 5px 1px #203891,5px 6px 1px #3852b1,
7px 6px 1px #203891,6px 7px 1px #3852b1,
8px 7px 1px #203891,7px 8px 1px #3852b1,
9px 8px 1px #203891,8px 9px 1px #3852b1,
10px 9px 1px #203891,9px 10px 1px #3852b1,
11px 10px 1px #203891,10px 11px 1px #3852b1,
12px 11px 1px #203891,11px 12px 1px #3852b1,
13px 12px 1px #203891,12px 13px 1px #3852b1,
14px 13px 1px #203891,13px 14px 1px #3852b1,
15px 14px 1px #203891,14px 15px 1px #3852b1;
border:none;  }

#div:ACTIVE {
margin-left:8px;
margin-top:8px;
box-shadow:
1px 0px 1px #203891,0px 1px 1px #3852b1,
2px 1px 1px #203891,1px 2px 1px #3852b1,
3px 2px 1px #203891,2px 3px 1px #3852b1,
4px 3px 1px #203891,3px 4px 1px #3852b1,
5px 4px 1px #203891,4px 5px 1px #3852b1,
6px 5px 1px #203891,5px 6px 1px #3852b1,
7px 6px 1px #203891,6px 7px 1px #3852b1,
8px 7px 1px #203891,7px 8px 1px #3852b1,
9px 8px 1px #203891,8px 9px 1px #3852b1,
10px 9px 1px #203891,9px 10px 1px #3852b1,
11px 11px 20px #000; }




    6.Image Rotation Transition      

Live Preview

HTML Code :

" <img align="middle" id="image1" alt="" src="http://2.bp.blogspot.com/-XAh91eKU8-
0/UQAUxbNbL7I/AAAAAAAABIY/rkeSwRxv0tU/s1600/06_background_tutorials.jpg" width="100px" height="100px">  "

CSS Code :


#image1
{ 
padding-left:100px;
padding-top:40px;
border:none;
-webkit-transform:rotateZ(0deg);
-moz-transform:rotateZ(0deg);
-o-transform:rotateZ(0deg);
-webkit-transition-property:transform;
-moz-transition-property:transform;
-o-transition-property:transform;
-webkit-transition-duration:1s,1s,1s;
-moz-transition-duration:1s,1s,1s;
-o-transition-duration:1s,1s,1s;
}
#image1:HOVER {
-webkit-transform:rotateZ(360deg);
-moz-transform:rotateZ(360deg);
-o-transform:rotateZ(360deg);
padding-left:85px;
padding-top:40px;
width:130px;
height: 130px;
}

---

Conclusion :- The above css-transition shown are for education purpose,You can use them anywhere you want,These transitions are created by t4w team & none of these are copy material.If you have any query,write below in comment box,we will further your query.