CSS3アニメーション効果の概要分析

       
  
 
 
 
 
 
 
 
 
 
 
 
 ease liner ease-in ease-out ease-in-out 
  

キーフレームセレクター

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

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

例如：

　　animation:mymove 5s infinite; 　　@keyframes mymove{ 　　　　from{ top:0px; } 　　　　to{ top:200px; } 　　}

还可以这么写：

　　@keyframes mymove{ 　　　　0%{ top:0px; } 　　　　25%{ top:200px; } 　　　　50%{ top:100px; } 　　　　75%{ top:200px; } 　　　　100%{ top:0px; } 　　}

案例：
css3的animation效果

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

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:向屏幕外为正方向。

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

实例：

transform3D转换效果

       
  
 
 
 
 
 
 
 
 
 
 
 
translate(移动距离)
 
 translateX translateY 
 
rotate(旋转角度)
 
 rotateX rotateY rotateZ 
  

使用transform-origin属性调整旋转中心。默认旋转中心点为p盒子的正中心。

这个旋转中心是可以改变的：

　　　　X轴：left、center、right.

　　　　Y轴：top、center、bottom.

　　　　Z轴：length px(一个长度值)。

以上这篇css3动画效果小结(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。

更多CSS3アニメーション効果の概要分析相关文章请关注PHP中文网！

相关文章：

如何用HTML5的Canvas制作3D动画效果

HTML5 Canvas动画效果图文代码演示

CSS3动画实现5种预载动画效果