背景位置动画运行不流畅

Question

你好，我有一些图片如下：

其中有一些动画，从左到右，然后从底部，然后从左到右，依此类推。

Image dimension 600 X 738 is and no and as number of squire is 5x5. I wrote css as follows to implement requirement:

.cute_angry_steam_coming_out_of_face {
  border-radius: 5px;
  display: inline-block;
  line-height: 52px;
  padding: 2px 2px 8px;
  position: relative;
  text-align: center;
  width: 120px;
  height: 148px;
  animation: cute_happy_smiling_face 0 2s;
  animation-iteration-count: infinite;
  background-image: url('https://i.stack.imgur.com/gQIqY.png');
  background-repeat: no-repeat;
  background-size: 960px 785px;
  image-rendering: -webkit-optimize-contrast;
  border: 1px solid red;
}

@keyframes cute_happy_smiling_face {
  0% {
    background-position: 0px 0px;
  }
  3% {
    background-position: 120px 0px;
  }
  6% {
    background-position: 240px 0px;
  }
  8% {
    background-position: 360px 0px;
  }
  11% {
    background-position: 480px 0px;
  }
  14% {
    background-position: 600px 0px;
  }
  17% {
    background-position: 0px 148px;
  }
  19% {
    background-position: 120px 148px;
  }
  22% {
    background-position: 240px 148px;
  }
  25% {
    background-position: 360px 148px;
  }
  28% {
    background-position: 480px 148px;
  }
  31% {
    background-position: 600px 148px;
  }
  33% {
    background-position: 0px 295px;
  }
  36% {
    background-position: 120px 295px;
  }
  39% {
    background-position: 240px 295px;
  }
  42% {
    background-position: 360px 295px;
  }
  44% {
    background-position: 480px 295px;
  }
  47% {
    background-position: 600px 295px;
  }
  50% {
    background-position: 0px 443px;
  }
  53% {
    background-position: 120px 443px;
  }
  56% {
    background-position: 240px 443px;
  }
  58% {
    background-position: 360px 443px;
  }
  61% {
    background-position: 480px 443px;
  }
  64% {
    background-position: 600px 443px;
  }
  67% {
    background-position: 0px 590px;
  }
  69% {
    background-position: 120px 590px;
  }
  72% {
    background-position: 240px 590px;
  }
  75% {
    background-position: 360px 590px;
  }
  78% {
    background-position: 480px 590px;
  }
  81% {
    background-position: 600px 590px;
  }
  83% {
    background-position: 0px 738px;
  }
  86% {
    background-position: 120px 738px;
  }
  89% {
    background-position: 240px 738px;
  }
  92% {
    background-position: 360px 738px;
  }
  94% {
    background-position: 480px 738px;
  }
  97% {
    background-position: 600px 738px;
  }
}

<div class="cute_angry_steam_coming_out_of_face"></div>

But it is not animating smoothly till end. What I want with every picture it should hold for a second and position should change to next as fast it can with looping infinitely.

At the end animation will look like following

Animation Video

Answer 1

/*{"dim":[600,738], "n":[5, 5]}*/
.cute_angry_steam_coming_out_of_face {
  border-radius: 5px;
  display: inline-block;
  line-height: 52px;
  padding: 2px 2px 8px;
  position: relative;
  text-align: center;
  width: 500px;
  height: 500px;
  animation: cute_happy_smiling_face 0 10s;
  animation-iteration-count: infinite;
  background-image: url('https://i.stack.imgur.com/gQIqY.png');
  background-repeat: no-repeat;
  background-size: 960px 785px;
  image-rendering: -webkit-optimize-contrast;
  border: 1px solid red;
  background-size: cover;
  background-position: center center;
}
@keyframes cute_happy_smiling_face {
  0% {background-position:0px 0px;}
  50% {background-position:0px 200px;}
  75% {background-position:200px 200px;}
  100% {background-position:300px 500px;}
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="cute_angry_steam_coming_out_of_face" ></div>
</body>
</html>

试试看，希望对您有所帮助。

Answer 2

为了方便起见，您可以考虑使用 CSS 变量，诀窍是根据宽度高度为位置使用负值。

您有 5 行 5 列和 22 个图像，因此您将动画分成 22 个状态 (100/22 = 4.54)。在每个状态上，我们在 x-axis 上将变量从 0 增加到 4，当我们达到 4 时，我们重置为 0 并增加 y-axis.

您还可以通过简单地更改 CSS 变量来轻松调整尺寸，这样您就不需要知道图像的 width/height，您只需要知道行数和列

.cute_angry_steam_coming_out_of_face {
  border-radius: 5px;
  display: inline-block;
  border: 1px solid red;
  --w:120px;
  --h:148px;
  width: var(--w);
  height: var(--h);
  background-image: url('https://i.stack.imgur.com/gQIqY.png');
  background-size: calc(5*var(--w)) calc(5*var(--h));
  animation: cute_happy_smiling_face 3s infinite;
}

@keyframes cute_happy_smiling_face {
  0%,4.54% {
    background-position: calc(0*var(--w)) calc(0*var(--h));
  }
  4.55%,9.09% {
    background-position: calc(-1*var(--w)) calc(0*var(--h));
  }
  9.10%,13.63% {
    background-position: calc(-2*var(--w)) calc(0*var(--h));
  }
  13.64%,18.18% {
    background-position: calc(-3*var(--w)) calc(0*var(--h));
  }
  18.19%,22.72% {
    background-position: calc(-4*var(--w)) calc(0*var(--h));
  }
  22.73%,27.27% {
    background-position: calc(0*var(--w)) calc(-1*var(--h));
  }
  27.28%,31.81% {
    background-position: calc(-1*var(--w)) calc(-1*var(--h));
  }
  31.82%,36.36% {
    background-position: calc(-2*var(--w)) calc(-1*var(--h));
  }
  36.37%,40.90% {
    background-position: calc(-3*var(--w)) calc(-1*var(--h));
  }
  40.91%,45.45% {
    background-position: calc(-4*var(--w)) calc(-1*var(--h));
  }
  45.46%,50% {
    background-position: calc(0*var(--w)) calc(-2*var(--h));
  }
  50.01%,54.54% {
    background-position: calc(-1*var(--w)) calc(-2*var(--h));
  }
  54.55%,59.09% {
    background-position: calc(-2*var(--w)) calc(-2*var(--h));
  }
  59.10%,63.63% {
    background-position: calc(-3*var(--w)) calc(-2*var(--h));
  }
  63.64%,68.18% {
    background-position: calc(-4*var(--w)) calc(-2*var(--h));
  }
  68.19%,72.72% {
    background-position: calc(0*var(--w)) calc(-3*var(--h));
  }
  72.73%,77.27% {
    background-position: calc(-1*var(--w)) calc(-3*var(--h));
  }
  77.28%,81.81% {
    background-position: calc(-2*var(--w)) calc(-3*var(--h));
  }
  81.82%,86.36% {
    background-position: calc(-3*var(--w)) calc(-3*var(--h));
  }
  86.37%,90.9% {
    background-position: calc(-4*var(--w)) calc(-3*var(--h));
  }
  90.91%,95.45% {
    background-position: calc(0*var(--w)) calc(-4*var(--h));
  }
  95.46%,100% {
    background-position: calc(-1*var(--w)) calc(-4*var(--h));
  }

}

<div class="cute_angry_steam_coming_out_of_face"></div>


<div class="cute_angry_steam_coming_out_of_face" style="--w:100px;--h:120px"></div>

<div class="cute_angry_steam_coming_out_of_face" style="--w:50px;--h:80px"></div>

另一个代码较少的有趣想法（我推荐）是单独为每个位置设置动画并使用 steps()。这将使代码更容易。唯一的缺点是您会看到 3 个空插槽。如果您有恰好 5x5 张图像 (25) 而不仅仅是 22 张，则此方法是完美的。

.cute_angry_steam_coming_out_of_face {
  border-radius: 5px;
  display: inline-block;
  border: 1px solid red;
  --w:120px;
  --h:148px;
  width: var(--w);
  height: var(--h);
  background-image: url('https://i.stack.imgur.com/gQIqY.png');
  background-size: calc(5*var(--w)) calc(5*var(--h));
  animation-name:     smiling_face-x, smiling_face-y; 
  animation-duration: 0.5s            ,2.5s; /* 2.5 = 5 x 0.5 */
  animation-timing-function:steps(5);
  animation-iteration-count:infinite;
}

@keyframes smiling_face-x {
  100% {
    background-position-x: calc(-5*var(--w));
  }
}
@keyframes smiling_face-y {
  100% {
    background-position-y: calc(-5*var(--h));
  }
}

<div class="cute_angry_steam_coming_out_of_face"></div>


<div class="cute_angry_steam_coming_out_of_face" style="--w:100px;--h:120px"></div>

<div class="cute_angry_steam_coming_out_of_face" style="--w:50px;--h:80px"></div>

这里是一个更通用的代码考虑 NxM 图片：

.cute_angry_steam_coming_out_of_face {
  border-radius: 5px;
  display: inline-block;
  border: 1px solid red;
  --w:120px;
  --h:148px;
  --n:3; /* number of rows     */
  --m:5; /* number of columns */
  --d:2s; /*duration*/
  width: var(--w);
  height: var(--h);
  background-image: url('https://i.stack.imgur.com/M2n58.png');
  background-size: calc(var(--m)*var(--w)) calc(var(--n)*var(--h));
  animation-name:     smiling_face-x, smiling_face-y; 
  animation-duration: calc(var(--d)/var(--n)),var(--d);
  animation-timing-function:steps(var(--m)),steps(var(--n));
  animation-iteration-count:infinite;
}

@keyframes smiling_face-x {
  100% {
    background-position-x: calc(-1*var(--m)*var(--w));
  }
}
@keyframes smiling_face-y {
  100% {
    background-position-y: calc(-1*var(--n)*var(--h));
  }
}

<div class="cute_angry_steam_coming_out_of_face"></div>


<div class="cute_angry_steam_coming_out_of_face" style="--w:100px;--h:120px"></div>

<div class="cute_angry_steam_coming_out_of_face" style="--w:50px;--h:80px"></div>

背景位置动画运行不流畅

Background position animation is not working smoothly

html

css

background-image

css-animations