CSS3之3d转变与关键帧

作者:分分快三计划

-webkit-animation:;动画
必须属性
-webkit-animation-name:; 关键帧名称
-webkit-animation-duration:; 动画持续时间
可选属性
-webkit-animation-timing-function:; 运动形式
-webkit-animation-delay:; 动画延迟时间
-webkit-animation-iteration-count 重复运动次数(值为infinite时表示无限次重复)

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-play-state:; 播放状态 (值为running时为播放 值为paused时为暂停)

@-webkit-keyframes 关键帧
写法: @-webkit-keyframes move (move为动画名称){
  0%{
    一开始时的样式
  }
  50%{
    运动到50%时的样式
  }
  100%{
    运动到终点时的样式
  }
}

 

-webkit-animation-direction:; 动画是否重置再开始播放(
值为alterrate时表示 动画交替执行
值为reverse时表示 动画反向执行
值为alternate-reverse时表示 动画反向交替执行
值为normal时表示 动画第二次直接跳到0%的状态开始执行
)

animation事件
animation运动结束后触发的事件
谷歌下
obj.addEventListener('WebkitAnimationEnd',function(){},false);
火狐下
obj.addEventListener('animationend',function(){},false);

综合写法: -webkit-animation:2s 1s move 5 ease  alterrate;(运动的总时间 第一次运动的延迟时间 运动的关键帧名称 重复次数 运动形式 运动方向 )

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划