是否可以使用CSS仅用这张图片制作动画效果？

Question

我想使用“皮卡丘”运行的图像，而不必创建gif（因为它更重），并且我想使用他在css中运行的效果。我将如何使用这段代码？你能帮我吗？

图片：https://game.gtimg.cn/images/nishiki/web202310/pkq_ani.png

.pikaqiu_run {
    width: 80px;
    height: 71px;
    background: url(//game.gtimg.cn/images/nishiki/web202310/pkq_ani.png);
    background-repeat: no-repeat;
    animation: steps(8, end) 0.5s infinite;
    right: 0;
    top: -71px;
}

<span class="pikaqiu_run"></span>

Answer 1

您可以使用CSS动画来跳过一段时间内的所有图像，从而产生关键帧动画。根据皮卡丘图像中的 8 个状态，关键帧设置为 8 帧（每个帧/状态为

12.5%

）。然后您需要做的就是找到正确的

background-position-x

值，以便在动画运行时所有帧保持在原位。您还可以更改某些框架的

width

，因为似乎并非所有框架都具有相同的宽度。为了防止帧之间的过渡，您可以应用

animation-timing-function: step-end;

.pika {
    background-image: url('https://game.gtimg.cn/images/nishiki/web202310/pkq_ani.png');
    width: 80px;
    height: 71px;
    animation-name: run;
    animation-duration: 0.75s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
    animation-timing-function: step-end;
}

@keyframes run {
    0%    {background-position-x: 0;}
    12.5% {background-position-x: 85px;}
    25%   {background-position-x: 166px;}
    37.5% {background-position-x: 241px;}
    50%   {background-position-x: 319px;}
    62.5% {background-position-x: 398px;}
    75%   {background-position-x: 478px;}
    87.5% {background-position-x: 560px;}
    100%  {background-position-x: 0;}
}

<div class="pika" />