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

时间 2020-03-16

标签 css 使用 animation timing function steps num start end 实现动画栏目 CSS 繁體版

原文原文链接

用animation作动画时发现背景图片是直接平移运动到指定位置的，即具备连续性，而animation-timing-function：steps(num，start/end)属性能够使背景图片运动不连续，即实现逐帧动画。css

steps(num，start/end) 第一个值num表示把动画分红了多少段；第二个值默认为end，较难理解此处不作深究。html

如下实例中图片大小为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>

原图以下：url

动画效果以下：spa

1. css3 实现逐帧动画
2. Android 用Animation-list实现逐帧动画
3. 逐帧动画
4. css3 animation实现逐帧动画
5. Animation-list实现逐帧动画
6. iOS ——逐帧动画
7. css3-逐帧动画
8. css3逐帧动画
9. IOS 逐帧动画
10. html5+css3实现动画、逐帧动画效果
更多相关文章...
• 现实生活中的 XML - XML 教程
• 使用 CSS 显示 XML - XML 教程
• ☆基于Java Instrument的Agent实现
• Java Agent入门实战（一）-Instrumentation介绍与使用