CSS3animation实现逐帧动画效果示例介绍

来源：懂视网责编：小采时间：2020-11-27 18:52:42

CSS3animation实现逐帧动画效果示例介绍

CSS3animation实现逐帧动画效果示例介绍:这篇文章主要介绍了CSS3 animation实现逐帧动画效果示例介绍，具有一定的参考价值，感兴趣的小伙伴们可以参考一下css3里面的animation属性非常强大，但是自己用的比较少，最近有次面试就刚好被问到了，趁现在有时间就对animation做一个小总结。同时实现一

推荐度：

点击下载本文 文档为doc格式

导读CSS3animation实现逐帧动画效果示例介绍:这篇文章主要介绍了CSS3 animation实现逐帧动画效果示例介绍，具有一定的参考价值，感兴趣的小伙伴们可以参考一下css3里面的animation属性非常强大，但是自己用的比较少，最近有次面试就刚好被问到了，趁现在有时间就对animation做一个小总结。同时实现一

这篇文章主要介绍了CSS3 animation实现逐帧动画效果示例介绍，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

css3里面的animation属性非常强大，但是自己用的比较少，最近有次面试就刚好被问到了，趁现在有时间就对animation做一个小总结。同时实现一个逐帧动画的demo作为练习

animation属性一览

因为animation属性比较多，然后在w3c上看有点蛋疼，干脆也做了一份导图，以后想查看，就一目了然了

CSS3 animation实现逐帧动画效果示例介绍

使用animation实现逐帧动画

熟悉了animation的属性之后，得找个简单的小项目实现下，逐帧动画好有意思，先跑一个满足下自己
思路很简单，就是给元素一个雪碧图的背景，然后添加的帧动画更改background-position，关键代码：

@keyframes run{ 
 from{ 
 background-position: 0 0; 
 } 
 to{ 
 background-position: -1540px 0 ; 
 } 
} 
p{ 
 width:140px; 
 height:140px; 
 background: url(run.png) ; 
 animation-name：run; 
 animation-duration:1s; 
 animation-iteration-count:infinite; 
}

CSS3 animation实现逐帧动画效果示例介绍

但是跑起来后我们发现，每帧动画之间帧动画都是滑动，并不是我们要的效果,为什么呢？
原来animation默认以ease方式过渡，它会在每个关键帧之间插入补间动画，所以动画效果是连贯性的
知道原因就好办了，解决思路就是：

@keyframes run{ 
 0%, 8%{ /*动作一*/ } 
 9.2%, 17.2%{ /*动作二*/ } 
 ... 
}

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

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

完整代码：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>css3逐帧动画</title> 
 <style> 
 @keyframes run{ 
 0%, 8%{ background-position: 0 0; } 
 9.2%, 17.2%{ background-position: -140px 0; } 
 18.4%, 26.4%{ background-position: -280px 0 ; } 
 27.6%, 35.6%{ background-position: -420px 0 ; } 
 36.8%, 44.8%{ background-position: -560px 0 ; } 
 46%, 54%{ background-position: -700px 0 ; } 
 55.2%, 63.2%{ background-position: -840px 0 ; } 
 64.4%, 72.4%{ background-position: -980px 0 ; } 
 73.6%, 81.6%{ background-position: -1120px 0 ; } 
 82.8%, 90.8%{ background-position: -1400px 0 ; } 
 92%, 100%{ background-position: -1540px 0 ; } 
 } 
 @-webkit-keyframes run{ 
 0%, 8%{ background-position: 0 0; } 
 9.2%, 17.2%{ background-position: -140px 0; } 
 18.4%, 26.4%{ background-position: -280px 0 ; } 
 27.6%, 35.6%{ background-position: -420px 0 ; } 
 36.8%, 44.8%{ background-position: -560px 0 ; } 
 46%, 54%{ background-position: -700px 0 ; } 
 55.2%, 63.2%{ background-position: -840px 0 ; } 
 64.4%, 72.4%{ background-position: -980px 0 ; } 
 73.6%, 81.6%{ background-position: -1120px 0 ; } 
 82.8%, 90.8%{ background-position: -1400px 0 ; } 
 92%, 100%{ background-position: -1540px 0 ; } 
 } 
 p{ 
 width:140px; 
 height:140px; 
 background: url(blog/754767/201606/754767-20160601000042992-1734972084.png) ; 
 animation:run 1s infinite; 
 -webkit-animation:run 1s infinite; 
 animation-fill-mode : backwards; 
 -webkit-animation-fill-mode : backwards; 
 } 
 </style> 
</head> 
<body> 
 <p></p> 
</body> 
</html>

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

CSS3 animation实现逐帧动画效果示例介绍

由上图可知:

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)

最终效果，因为录制的问题可能有点卡顿，有兴趣的同学可以直接去跑下：

完整代码：

<!DOCTYPE html> 
 <html lang="en"> 
 <head> 
 <meta charset="UTF-8"> 
 <title>css3逐帧动画</title> 
 <style> 
 @keyframes run{ 
 0%{ 
 background-position: 0 0; 
 } 
 8.333%{ 
 background-position: -140px 0; 
 } 
 16.666%{ 
 background-position: -280px 0 ; 
 } 
 25.0%{ 
 background-position: -420px 0 ; 
 } 
 33.333%{ 
 background-position: -560px 0 ; 
 } 
 41.666%{ 
 background-position: -700px 0 ; 
 } 
 50.0%{ 
 background-position: -840px 0 ; 
 } 
 58.333%{ 
 background-position: -980px 0 ; 
 } 
 66.666%{ 
 background-position: -1120px 0 ; 
 } 
 75.0%{ 
 background-position: -1260px 0 ; 
 } 
 83.333%{ 
 background-position: -1400px 0 ; 
 } 
 91.666%{ 
 background-position: -1540px 0 ; 
 } 
 100%{ 
 background-position: 0 0 ; 
 } 
 } 
 @-webkit-keyframes run{ 
 0%{ 
 background-position: 0 0; 
 } 
 8.333%{ 
 background-position: -140px 0; 
 } 
 16.666%{ 
 background-position: -280px 0 ; 
 } 
 25.0%{ 
 background-position: -420px 0 ; 
 } 
 33.333%{ 
 background-position: -560px 0 ; 
 } 
 41.666%{ 
 background-position: -700px 0 ; 
 } 
 50.0%{ 
 background-position: -840px 0 ; 
 } 
 58.333%{ 
 background-position: -980px 0 ; 
 } 
 66.666%{ 
 background-position: -1120px 0 ; 
 } 
 75.0%{ 
 background-position: -1260px 0 ; 
 } 
 83.333%{ 
 background-position: -1400px 0 ; 
 } 
 91.666%{ 
 background-position: -1540px 0 ; 
 } 
 100%{ 
 background-position: 0 0 ; 
 } 
 } 
 p{ 
 width:140px; 
 height:140px; 
 background: url(754767/201606/754767-20160601000042992-1734972084.png) ; 
 animation:run 1s steps(1, start) infinite; 
 -webkit-animation:run 1s steps(1, start) infinite; 
 } 
 </style> 
 </head> 
 <body> 
 <p></p> 
 </body>

CSS3 animation实现逐帧动画效果示例介绍

CSS3animation实现逐帧动画效果示例介绍

推荐度：

点击下载本文 文档为doc格式

标签：动画实现效果

热门焦点

CSS3animation实现逐帧动画效果示例介绍

CSS3animation实现逐帧动画效果示例介绍

CSS3animation实现逐帧动画效果示例介绍

最新推荐

猜你喜欢

热门推荐