Question

嗨，我的图片如下：

从左到右，从下到下，从左到右，都有一些动画。

图像尺寸600 X 738为，否，乡绅数量为5x5。我编写CSS来实现要求：

.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>

但是直到最后动画并不能流畅。我想让每张图片保持一秒钟，并且位置应该无限循环地尽可能快地切换到下一张。

最后，动画如下所示

Animation Video

Answer 1

要使其变得更容易，您可以考虑使用CSS变量，诀窍是根据宽度高度对位置使用负值。

您有5行5列和22张图像，因此可以将动画分为22种状态（100/22 = 4.54）。在每种状态下，我们在x轴上将变量从0增大到4，当到达4时，我们将重置为0，并在y轴上增大。< / p>

您还可以通过简单地更改CSS变量来轻松调整尺寸，因此您无需知道图像的宽度/高度，只需知道行数和列数

.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>

Answer 2

/*{"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>

尝试一下，希望对您有所帮助。

背景位置动画无法正常运行

2 个答案: