CSS 逐帧动画

image.png

.container{
width: 100px;
height: 100px;
border: 1px solid red;
background: url(./animal.png) no-repeat;
animation: run 1s infinite;
animation-timing-function: steps(1);
}
@keyframes run{
0%{
background-position: 0 0;
}
12.5%{
background-position: -100px 0;
}
25%{
background-position: -200px 0;
}
37.5%{
background-position: -300px 0;
}
50%{
background-position: 0 -100px;
}
62.5%{
background-position: -100px -100px;
}
75%{
background-position: -200px -100px;
}
87.5%{
background-position: -300px -100px;
}
100%{
background-position: 0 0;
}
}

结果如下：

image.png

最重要的语句是：
animation-timing-function: steps(1);
animation-timing-function: steps(n);
表示在关键帧之间有几个画面。

image.png