Lesson 8 CSS3 Transitions and Animations

Transition Width Is pretty simple all that I have going on in my example is i put a background image on a div with in another div floated the image div to the right and made it so when you hover the containing div gets wider but if we didn't add the transition property there would only instant and you would get to see the example gradually get to where it is going.

          
#transition{
width:98px;
height:98px;

transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
#rocket{background: url('lib/img/rocket.png') 0 0;
width:98px;
height:98px;
float:right;
}
#transition:hover{width:400px}
		   

Here's the HTML For The example below

           
            <div id="transition">
            
            <div id="rocket"></div>
            
            </div>
           
           
           
           
           
           
           

Now if you wanted to have more then one style transition you would add propertys seperated by commas

Like This:

            transition:width 2s,height 2s, transform 2s;
            

Transform rotate(); allows us to rotate elements and give them a more dynamic position.

          #rocket2{
background: url('lib/img/rocket.png') 0 0;
width:100px;
height:100px;
transition:width 2s, height 2s, transform 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
 
	}
	#rocket2:hover{
transform:rotate(42deg);
-ms-transform:rotate(42deg); /* IE 9 */
-moz-transform:rotate(42deg); /* Firefox */
-webkit-transform: rotate(42deg); /* Safari and Chrome */
-o-transform:rotate(42deg); /* Opera */
	height:100px;
	width:100px;
	}
            

In this Section we are adding a transition to our rotate effect so we can see that rotate in action now with rotate we must tell it what degree ro rotate to within the parentheses

With the Transform scale we can make the rocket grow

     	#rocket3{
background: url('lib/img/rocket.png') 0 0;
width:98px;
height:98px;
transition:width 2s, height 2s, transform 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
 
	}
	#rocket3:hover{
transform:scale(1.5,1.5);
-ms-transform:scale(1.5,1.5); /* IE 9 */
-moz-transform:scale(1.5,1.5); /* Firefox */
-webkit-transform:scale(1.5,1.5); /* Safari and Chrome */
-o-transform:scale(1.5,1.5); /* Opera */
	
	}
 
     

Transform Translate will allow us to basically give the look as if we were using positioning css

					#square2{width:98px;
	height:98px;
	background-color:rgba(0, 0, 51, 0);
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
float:left;}
#rocket4{background: url('lib/img/rocket.png') 0 0;
width:98px;
height:98px;
float:left;
transition:width 2s, height 2s, transform 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
	#rocket4_container{
		width:700px;
height:98px;

transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
		}
		 #rocket4:hover{transform:translate(50px);
-moz-transform:translate(-50px);
-ms-transform:translate(-50px);
-webkit-transform:translate(-50px);
-o-transform:translate(-50px);
}
              

With the transform skew we will make it so the rocket gets a little skewy

	#rocket5{background: url('lib/img/rocket.png') 0 0;
width:98px;
height:98px;
float:left;
transition:width 2s, height 2s, transform 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */

} 
	#rocket5:hover{
transform:skew(-30deg,-20deg);/* x-axis, y-axis */
-ms-transform:skew(-30deg,-20deg); /* IE 9 */
-moz-transform:skew(-30deg,-20deg); /* Firefox */
-webkit-transform:skew(-30deg,-20deg); /* Safari and Chrome */
-o-transform:skew(-30deg,-20deg); /* Opera */	
	
	
	
}
            

Huh Kinda reminds me of a pencil

Finally to the big kahuna animation with css is a cool way to do all things that you do with javascript flash but instead it's CSS the first thing your gonna need to know is most of everything you do with the animations is first you need @keyframes.
For a animation to work you must bind it to a selector like i do down below on rocket6 it had animation rocketborder which is the name of our animation.

             	#rocket6{background: url('lib/img/rocket.png') 0 0;
width:98px;
height:98px;
position:relative;

}

    #rocket6:hover{  border:#999 solid 3px;
		-webkit-animation-name:rocketborder;
		-webkit-animation-duration:1s;
		-webkit-animation-iteration-count:2;
		-webkit-animation-direction:alternate;
		
		-moz-animation-name:rocketborder;
		-moz-animation-duration:1s;
		-moz-animation-iteration-count:2;
		-moz-animation-direction:alternate;

		-o-animation-name:rocketborder;
		-o-animation-duration:1s;
		-o-animation-iteration-count:2;
		-o-animation-direction:alternate;
	}
	@-webkit-keyframes rocketborder{
		from{border:#999 solid 5px;}
		to{border:#930 solid 10px ;}
	}
	@-o-keyframes rocketborder{
		from{border:#999 solid 5px;}
		to{border:#930 solid 10px ;}
	}
	@-moz-keyframes rocketborder{
		from{border:#999 solid 5px;}
		to{border:#930 solid 10px ;}
	}