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);
转载于:https://www.cnblogs.com/dreamerC/p/6230583.html
