第二周总结

在本周，主要学习了一下使用css3控制HTML元素的动画效果

1.对元素transform的控制

css3中，元素可以具有如下的transform-coontrol属性：
webkit-transform: translate(3em,0); 
webkit-transform: rotate(30deg); 
webkit-transform: scale(1.5); 
通过恰当的变换，最终可以将元素的位置变化成为我们需要的效果。 

2.CSS3的动画属性 

CSS3中元素的所有均由此的属性控制：webkit-transition: 1s ease-in-out; 
实际上，这个css属性控制了在元素的style发生变化的时候应该怎样改变那些数值，

一些可以连续变化的style，诸如opacity，color，width等等都可以在这样的属性控制下进行动画.

transition抓住了所设置变化属性的起始态和完成态，通过设定的速度曲线来完成动画。可以涉及到各种变化的css属性，默认为all，则所有变化的属性都会在出发时，以动画的形式展现出来。这种动画方式是css3的，因此ie9以下是不支持的，其他的浏览器需要加前缀，并且只有两态，不支持自定义中间的状态。

eg.<style type= "text/css" >

div

{

width : 100px ;

height : 100px ;

background : red ;

transition:width  2 s;

-moz-transition:width  2 s;  /* Firefox 4 */

-webkit-transition:width  2 s;  /* Safari and Chrome */

-o-transition:width  2 s;  /* Opera */

}

  

div:hover

{

width : 300px ;

}

</style>

<div></div>

transform是一种变化属性，该属性允许我们对元素进行旋转、缩放、移动或倾斜。可以作为transition中需要变化的属性。

前缀：

　　　　　   transform:rotate(9deg);
　　　　　　ms-transform:rotate(9deg); /* Internet Explorer */
　　　　　　moz-transform:rotate(9deg); /* Firefox */
　　　　　　webkit-transform:rotate(9deg); /* Safari 和 Chrome */
　　　　　　o-transform:rotate(9deg); /* Opera */