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% 动画的结束时间。

例如：

CSS Code复制内容到剪贴板

1. animation:mymove 5s infinite;   

2.   

3. @keyframes mymove{   

4.   

5. from{ top:0px; }   

6.   

7. to{ top:200px; }   

8.   

9. }  

还可以这么写：

CSS Code复制内容到剪贴板

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效果

XML/HTML Code复制内容到剪贴板

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转换效果

XML/HTML Code复制内容到剪贴板

1.   

2.   

3.   

4.       

5.       

6.       

7.       

8.   

9.   

10.