3d變換是在transform基礎上實現的 transform-style:preserve-3d; 建立3d空間 perspective:; 景深(設置用戶看的距離) perspective-origin:center center;(預設) 景深基點(設置用戶從哪個方向看) backface-v ...
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運動結束後觸發的事件
谷歌下
obj.addEventListener('WebkitAnimationEnd',function(){},false);
火狐下
obj.addEventListener('animationend',function(){},false);
