CSS3 animation属性中的steps实现GIF动图(逐帧动画)

相信 animation 大家都用过很多，知道是 CSS3做动画用的。而我自己就只会在 X/Y轴 上做位移旋转，使用 animation-timing-function 规定动画的速度曲线，常用到的 贝塞尔曲线。但是这些动画效果都是连续性的。

今天发现个新功能 animation-timing-function 的另外个属性值 steps()功能符，可以让动画不连续，就是制作逐帧动画。

  steps(n,start/end)  

　　第一个参数 number 为把动画分为 n 步阶段性展示，表示把我们的动画分成了多少段；

　　第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态，end 为开始时的状态。

第二个参数具体说就是，emmmm.....................我寄几也没详细看（没理解），附上传送门你们看下张鑫旭大神的讲解  CSS3 animation属性中的steps功能符深入介绍

 

这里只需要第一个参数就好了

 

 

这张素材宽高：2128*241、总共为8帧，故 steps(8)  

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>CSS3 animation属性中的steps实现GIF动图(逐帧动画)</title>
 8     <style>
 9         .main {
10             margin: 100px auto;
11             width: 266px;
12             height: 241px;
13             background: url(./test.jpg);
14             background-size: 2128px;
15             animation: sprite5 1s steps(8) infinite
16         }
17 
18         @keyframes sprite5 {
19             0% {
20                 background-position: 0 0
21             }
22 
23             100% {
24                 background-position: -2128px 0;
25             }
26         }
27     </style>
28 </head>
29 
30 <body>
31     <div class="main"></div>
32 </html>

ok，大功告成，效果预览，当然这张GIF来的

👇👇👇👇👇👇👇

posted @ 2019-12-16 14:09  有梦想的切图仔  阅读(2687)  评论(0)  编辑  收藏  举报