.gif-1 { display: block; width: 150px; height: 220px; background: url(images/animation/ku_animation.png) 0 0 no-repeat; background-size: 100%; animation: ku 0.4s steps(14) infinite } @keyframes ku { from { background-position: 0 0; } to { background-position: 0 -3080px; } }
假设图片为150*3300,为15帧,每帧为150*220则
-
background-position: 0 -3080px; -3080为长图height-一帧的高度,即3300-220=3080
-
animation: ku 0.4s steps(14) infinite 0.4s内完成整个懂的年华,steps为15帧-1=14