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介紹與使用

相關標籤/搜索