Codrops Tutorials: Transition

Codrops Tutorials

This is a treasure trove of CSS and JQuery.

40+ New HTML5/CSS3 Articles and Tutorials

A lot of menu transition effects with demos and code downloads.

 

CSS Background Color Transition

Color transition made easy.

a {
   background: #f5f5f5;
   -moz-transition: all 0.2s linear;
   -webkit-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   transition: all 0.2s linear;
}

a:hover {
   background: #008BFD;
}
a {
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}

Read more: CSS3 transition-timing-function Property [w3schools]
Demo: Sexy Interactions with CSS Transitions [thinkvitamin]

Changing Background Image Transition


.trans {width: 30px;	
height: 30px;	
padding: 0;	
margin: 0;	
border: 0 solid #333;	
background-image: url(back-sprite.gif);	
background-repeat: no-repeat;	
background-position: 0 0;	
-webkit-transition: background-position .3s ease;	   
-moz-transition: background-position .3s ease;	     
-o-transition: background-position .3s ease;	        
transition: background-position .3s ease;
background-color: #000;
 -moz-transition: .3s ease;
transition: .3s ease;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
}

.trans:hover {	background-position: 0 -30px; background-color:#0CC;}

Demo | Download Source

Read: Changing a Background-image with CSS3 Transitions | Demo

Sample: RightNowWP [ThemeForest]

jQuery MagicLine Navigation

Read | Demo

Comments are closed.