欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS中使用animation-timing-function:steps(num,start/end)实现逐帧动画

程序员文章站 2022-06-24 15:49:24
用animation做动画时发现背景图片是直接平移运动到指定位置的,即具有连续性,而animation-timing-function:steps(num,start/end)属性可以使背景图片运动不连续,即实现逐帧动画。 steps(num,start/end) 第一个值num表示把动画分成了多少 ......

用animation做动画时发现背景图片是直接平移运动到指定位置的,即具有连续性,而animation-timing-function:steps(num,start/end)属性可以使背景图片运动不连续,即实现逐帧动画。

steps(num,start/end)        第一个值num表示把动画分成了多少段;第二个值默认为end,较难理解此处不做深究。

以下实例中图片大小为1260px*300px,共分7帧,故num值为7

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             *{margin: 0;padding: 0;}
 8             .box{
 9                 width: 200px;
10                 height: 300px;
11                 background: pink url(img/charector.png) ;
12                 animation:name 1s steps(7) infinite;    
13             }
14             @keyframes name{
15                 0%{
16                     background-position: 0 0;
17                 }
18                 100%{
19                     background-position: -1260px 0;
20                 }
21             }
22         </style>
23     </head>
24     <body>
25         <div class="box"></div>
26     </body>
27 </html>

原图如下:

CSS中使用animation-timing-function:steps(num,start/end)实现逐帧动画

动画效果如下:

CSS中使用animation-timing-function:steps(num,start/end)实现逐帧动画