css3动画效果小结(推荐)

2、动画属性animation

animation: name duration timing-function delay iteration-count direction;

注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。

@keyframes animationname {keyframes-selector {css-styles;}}

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

例如：

1. 　　animation:mymove 5s infinite;   
2.   
3. 　　@keyframes mymove{   
4.   
5. 　　　　from{ top:0px; }   
6.   
7. 　　　　to{ top:200px; }   
8.   
9. 　　}  

还可以这么写：

1. 　　@keyframes mymove{   
2.   
3. 　　　　0%{ top:0px; }   
4.   
5. 　　　　25%{ top:200px; }   
6.   
7. 　　　　50%{ top:100px; }   
8.   
9. 　　　　75%{ top:200px; }   
10.   
11. 　　　　100%{ top:0px; }   
12.   
13. 　　}   

 案例：
css3的animation效果

1.   
2.   
3.   
4.   
5.   
6.   
7.   

8. 注释：本例在 Internet Explorer 中无效。

     
9.   
10.   
11.   
12.   
13.   

3、设置3D场景（即transform）

-webkit-perspective:800;(单位为像素)--即三维物体距离屏幕的距离。

-webkit-perspective-origin:50% 50%;(这个属性代表了人眼观察的视野。50% 50%为X轴、Y轴相应的位置，即屏幕的正中央。)

使用transform属性调整元素：-webkit-transform-style:-webkit-perserve-3d;(这个属性是告诉浏览器我们是在一个三维空间中对元素进行操作)

(1)、translate(移动距离)

　　　　translateX（x px）

　　　　translateY（y px）

　　　　translateZ（z px）

(2)、rotate(旋转角度)

　　　　rotateX(x deg)

　　　　rotateY(y deg)

　　　　rotateZ(z deg)

transform：rotate（45deg）

rotateX:向屏幕上边沿向内旋转为正方向。

rotateY:向屏幕竖直向下为正方向。

rotateZ:向屏幕外为正方向。

一个div块，右边沿向屏幕内旋转45deg,即应设置为：Transform：rotateY（45deg）。

实例：

transform3D转换效果

1.   
2.   
3.   
4.       
5.       
6.       
7.       
8.   
9.   
10.