css3动画帧

动画帧实现：

css3使用steps来实现逐帧动画，动画过程中可能出现抖动，实乃精度偏差问题。

通常在动画里用到百分比单位时会出现抖动或位移现象，解决方法就是转换成具体的rem或px长度单位。

动画一般只有background-position属性，可以有很多帧，steps(1)这样去执行，也可以是两帧，steps(n)来执行。

持续执行的动画帧可能会出现最后一帧跟第一帧一闪而过完全看不到，可以考虑给动画帧的雪碧图加一帧空白帧在最后补位。

 

.loadEffectBox{
    position: absolute;
    width: 99px;
    height: 121.5px;
    left: 50%;
    top: 36%;
    transform: translateX(-50%);
    background: url('../img/loading/effect2.png') no-repeat;
    background-size: 1881px 121.5px;
    background-position:0 0;
    -webkit-animation:roadEffect 1.44s steps(18,end) infinite; 
    -webkit-animation-fill-mode: backwards;  
}

@-webkit-keyframes roadEffect{
  0% {background-position:0 0;}
  100% {background-position:-1782px 0;}
}

动画具体属性参照如下：

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

steps对应的是animation-timing-function

steps(number,position)，有两个参数。

number表示动画的段数，段数等于雪碧图中的关键帧数减1。

position有两个值：end和start。end是默认值。

 

注意点： start和end搭配forwards和backwards时，可能出现动画闪白，多走一帧的问题，具体要多调测。

网上看到的一个超详细讲解：--》http://wanlimm.com/77201809146901.html

 

转载于:https://www.cnblogs.com/nanyang520/p/11417035.html