css3 animation实现逐帧动画

摘要:
css3中的动画属性非常强大,但我很少使用它。我在最近的一次采访中被问及此事。现在我有时间对动画做一个简短的总结。默认情况下,原始动画在缓和模式下过渡。它将在每个关键帧之间插入间隙动画,因此很容易知道为什么动画效果是一致的。解决方案是:@keyframerun{0%,8%{/*action 1*/}9.2%,17.2%{/*action 2*/}…}步骤1:在动作之间停留8帧,0%设置动作1,动作1以8%结束步骤2:在动作间转换1.2帧,9.2%设置动作2,动作2以17.2%结束完整代码:1˂!

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


animation属性一览

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

 animation属性一览


使用animation实现逐帧动画

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

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

css3 animation实现逐帧动画第2张

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

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

step1:动作之间停留8帧,0%设置动作一,动作一结束在8%
step2:动作之间过渡1.2帧,9.2%设置动作二,动作二结束在17.2%

完整代码:

css3 animation实现逐帧动画第3张css3 animation实现逐帧动画第4张
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css3逐帧动画</title>
 6     <style>
 7     @keyframes run{
 8     0%, 8%{  background-position: 0 0;  }
 9     9.2%, 17.2%{  background-position: -140px 0;  }
10     18.4%, 26.4%{  background-position: -280px 0 ;  }
11     27.6%, 35.6%{  background-position: -420px 0 ;  }
12     36.8%, 44.8%{  background-position: -560px 0 ;  }
13     46%, 54%{  background-position: -700px 0 ;  }
14     55.2%, 63.2%{  background-position: -840px 0 ;  }
15     64.4%, 72.4%{  background-position: -980px 0 ;  }
16     73.6%, 81.6%{  background-position: -1120px 0 ;  }
17     82.8%, 90.8%{  background-position: -1400px 0 ;  }
18     92%, 100%{  background-position: -1540px 0 ;  }
19     }
20     @-webkit-keyframes run{
21     0%, 8%{  background-position: 0 0;  }
22     9.2%, 17.2%{  background-position: -140px 0;  }
23     18.4%, 26.4%{  background-position: -280px 0 ;  }
24     27.6%, 35.6%{  background-position: -420px 0 ;  }
25     36.8%, 44.8%{  background-position: -560px 0 ;  }
26     46%, 54%{  background-position: -700px 0 ;  }
27     55.2%, 63.2%{  background-position: -840px 0 ;  }
28     64.4%, 72.4%{  background-position: -980px 0 ;  }
29     73.6%, 81.6%{  background-position: -1120px 0 ;  }
30     82.8%, 90.8%{  background-position: -1400px 0 ;  }
31     92%, 100%{  background-position: -1540px 0 ;  }
32     }
33     div{
34         width:140px;
35         height:140px;
36         background: url(http://images2015.cnblogs.com/blog/754767/201606/754767-20160601000042992-1734972084.png) ;
37         animation:run 1s infinite;
38             -webkit-animation:run 1s infinite;
39         animation-fill-mode : backwards;
40             -webkit-animation-fill-mode : backwards;
41     }
42     </style>
43 </head>
44 <body>
45     <div></div>
46 </body>
47 </html>
View Code

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

阶跃动画解析

由上图可知:
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)

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

css3 animation实现逐帧动画第6张

完整代码:

css3 animation实现逐帧动画第7张css3 animation实现逐帧动画第8张
  1 <!DOCTYPE html>
  2     <html lang="en">
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>css3逐帧动画</title>
  6         <style>
  7         @keyframes run{
  8             0%{
  9                 background-position: 0 0;
 10             }
 11             8.333%{
 12                 background-position: -140px 0;
 13             }
 14             16.666%{
 15                 background-position: -280px 0 ;
 16             }
 17             25.0%{
 18                 background-position: -420px 0 ;
 19             }
 20             33.333%{
 21                 background-position: -560px 0 ;
 22             }
 23             41.666%{
 24                 background-position: -700px 0 ;
 25             }
 26             50.0%{
 27                 background-position: -840px 0 ;
 28             }
 29             58.333%{
 30                 background-position: -980px 0 ;
 31             }
 32             66.666%{
 33                 background-position: -1120px 0 ;
 34             }
 35             75.0%{
 36                 background-position: -1260px 0 ;
 37             }
 38             83.333%{
 39                 background-position: -1400px 0 ;
 40             }
 41             91.666%{
 42                 background-position: -1540px 0 ;
 43             }
 44             100%{
 45                 background-position: 0 0 ;
 46             }
 47         }
 48         @-webkit-keyframes run{
 49             0%{
 50                 background-position: 0 0;
 51             }
 52             8.333%{
 53                 background-position: -140px 0;
 54             }
 55             16.666%{
 56                 background-position: -280px 0 ;
 57             }
 58             25.0%{
 59                 background-position: -420px 0 ;
 60             }
 61             33.333%{
 62                 background-position: -560px 0 ;
 63             }
 64             41.666%{
 65                 background-position: -700px 0 ;
 66             }
 67             50.0%{
 68                 background-position: -840px 0 ;
 69             }
 70             58.333%{
 71                 background-position: -980px 0 ;
 72             }
 73             66.666%{
 74                 background-position: -1120px 0 ;
 75             }
 76             75.0%{
 77                 background-position: -1260px 0 ;
 78             }
 79             83.333%{
 80                 background-position: -1400px 0 ;
 81             }
 82             91.666%{
 83                 background-position: -1540px 0 ;
 84             }
 85             100%{
 86                 background-position: 0 0 ;
 87             }
 88         }
 89         div{
 90             width:140px;
 91             height:140px;
 92             background: url(http://images2015.cnblogs.com/blog/754767/201606/754767-20160601000042992-1734972084.png) ;
 93             animation:run 1s steps(1, start) infinite;
 94                 -webkit-animation:run 1s steps(1, start) infinite;
 95         }
 96         </style>
 97     </head>
 98     <body>
 99         <div></div>
100     </body>
View Code



   

免责声明:文章转载自《css3 animation实现逐帧动画》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇检测PC端和移动端的方法总结快速熟悉正则表达式下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

js进阶 12-5 jquery中表单事件如何使用

js进阶 12-5 jquery中表单事件如何使用 一、总结 一句话总结:表单事件如何使用:可元素添加事件监听,然后监听元素,和javase里面一样。 1、表单获取焦点和失去焦点事件有哪两组? 注意是blur/focus和focus in/out,并没有给blur加什么 blur() 当元素失去焦点时触发 blur 事件。 blur事件会在元素...

循序渐进学习XHTML

选择什么样的DOCTYPE 前言 大家好!这个系列文章是按阿捷自己制作这个站点的过程编写的。之前阿捷也一直没有制作过一个真正符合web标准的网站。现在边参考国外资料边制作,同时把过程中的心得和经验记录下来,希望对大家有点帮助。好了,让我们开始吧 开始制作符合标准的站点,第一件事情就是声明符合自己需要的DOCTYPE。 查看本站首页原代码,可以看到第一行就是...

CSS动画:animation、transition、transform、translate

https://blog.csdn.net/px01ih8/article/details/80780470 一、区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画)、transition(过渡)、transform(变形)、translate(移动)。 CSS3中的transform(变形)属性用于内联元素和块级元素,可以...

css3 用混合模式要注意的问题

css3 用混合模式要注意的问题 .p2_2 { 78.133%; height: 2.795rem; background: url('/uploadpic/xiangmu/zhongyibaoming/images/2/p2_2.png') no-repeat, url(/dahuajushi/images/2/p2_bg.png) no-repea...

如何当上Leader和六千个bug的系统

在昨天的读书会上我分享了我是如何当上leader以及当上leader之后的体会。然后今天Sophie总结了我的发言,大家对此有些反馈。我根据大家的反馈写了这篇文章,主要针对几点: 大家如何当上leader? 关于那六千多个bug的系统。 关于其他人也来抢leader这个position. 在我简单描述提前一年布局当上leader的经过之后。可能大...

使用webgl(three.js)创建科技版3D机房,3D机房微模块详细介绍(升级版三)—— 1

上节课已经详细描述了微模块机房的实现过程,文章地址(https://www.cnblogs.com/yeyunfei/p/10484241.html) 紧接着上节课的内容 我们这节可来详细讲解科技版机房的三维实现 随着数据大屏的普及,实用与科技感这样的双向标应运而生。 这节课我们就主要展示一下科技感的数据中心,结合上节课的微模块,再加上一个科技感强一点的房间...