CSS3之3d變換與主要畫面格

標籤：ati   dev   動畫   名稱   duration   function   orm   direction   ima   

3d變換是在transform基礎上實現的
transform-style:preserve-3d; 建立3d空間
perspective:; 景深(設定使用者看的距離)
perspective-origin:center center;(預設) 景深基點(設定使用者從哪個方向看)
backface-visility 隱藏背面
-transform:; 在3d中新增了以下函數:
rotateX() rotateY() rotateZ()
translateZ()
scaleZ()
注: X表示螢幕水平方向 Y表示螢幕垂直方向 Z表示垂直於螢幕表面方向

-webkit-animation:;動畫
必須屬性
-webkit-animation-name:; 主要畫面格名稱
-webkit-animation-duration:; 動畫期間
可選屬性
-webkit-animation-timing-function:; 運動形式
-webkit-animation-delay:; 動畫延遲時間
-webkit-animation-iteration-count 重複運動次數(值為infinite時表示無限次重複)

-webkit-animation-play-state:; 播放狀態 (值為running時為播放 值為paused時為暫停)

-webkit-animation-direction:; 動畫是否重設再開始播放(
值為alterrate時表示 動畫交替執行
值為reverse時表示 動畫反向執行
值為alternate-reverse時表示 動畫反向交替執行
值為normal時表示 動畫第二次直接跳到0%的狀態開始執行
)

綜合寫法: -webkit-animation:2s 1s move 5 ease  alterrate;(運動的總時間 第一次運動的延遲時間 運動的主要畫面格名稱 重複次數 運動形式 運動方向 )

@-webkit-keyframes 主要畫面格
寫法: @-webkit-keyframes move (move為動畫名稱){
　　0%{
　　　　一開始時的樣式
　　}
　　50%{
　　　　運動到50%時的樣式
　　}
　　100%{
　　　　運動到終點時的樣式
　　}
}

animation事件
animation運動結束後觸發的事件
Google下
obj.addEventListener(‘WebkitAnimationEnd‘,function(){},false);
Firefox下
obj.addEventListener(‘animationend‘,function(){},false);

 

CSS3之3d變換與主要畫面格