CSS3 animation逐帧动画

2018-11-22 14:51| 作者: admin| 查看: 624| 评论: 0|来自: 凯博

关于animation属性的基本用法可以参阅CSS3 animation一章节。

使用animation实现逐帧动画:

熟悉了animation的属性之后,得找个简单的小项目实现下。

思路很简单,就是给元素一个雪碧图的背景,然后添加的帧动画更改background-position。

关键代码如下:

[CSS] 纯文本查看 复制代码
@keyframes run{
  from{
    background-position: 0 0;
  }
  to{
    background-position: -1540px 0 ;
  }
}
div{
  width:140px;
  height:140px;
  background: url(/run.png) ;
  animation-name:run;
  animation-duration:1s;
  animation-iteration-count:infinite;
}

a:3:{s:3:\

但是跑起来后我们发现,每帧动画之间帧动画都是滑动,并不是我们要的效果,为什么呢?

原来animation默认以ease方式过渡,它会在每个关键帧之间插入补间动画,所以动画效果是连贯性的

知道原因就好办了,解决思路就是:

[CSS] 纯文本查看 复制代码
@keyframes run{
  0%, 8%{  /*动作一*/  }
  9.2%, 17.2%{  /*动作二*/  }
    ...
}

step1:动作之间停留8帧,0%设置动作一,动作一结束在8%

step2:动作之间过渡1.2帧,9.2%设置动作二,动作二结束在17.2%

完整代码:

[HTML] 纯文本查看 复制代码运行代码




凯博



还有另外一个实现方法,就是利用steps(),就是帧之间的阶跃动画,这个在w3c里面没有写,先贴个图:

a:3:{s:3:\

由上图可知:

steps(1,start):动画一开始就跳到 100% 直到这一帧(不是整个周期)结束。

steps(1,end):保持 0% 的样式直到这一帧(不是整个周期)结束。

另外也可以直接设置 animation-timing-function:step-start/step-end。

step-start效果等同于steps(1,start),step-end效果等同于steps(1,end)。

最终效果,因为录制的问题可能有点卡顿,有兴趣的同学可以直接复制代码去跑下:

a:3:{s:3:\

完整代码:

[HTML] 纯文本查看 复制代码运行代码




凯博



最新评论

返回顶部