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>