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);
