文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >背景位置动画工作不顺利

问背景位置动画工作不顺利
EN

Stack Overflow用户
提问于 2019-07-16 03:40:47
回答 2查看 181关注 0票数 0

嗨，我有一些图片如下：

​

​

其中有一些动画从左到右，然后底部，然后左到右，等等。

图像维数600 X 738是和no，当乡绅数为5x5。为了实现需求，我编写了如下css：

​

代码语言：javascript
复制
.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;
  }
}
代码语言：javascript
复制
<div class="cute_angry_steam_coming_out_of_face"></div>

​

但它的动画并不顺利直到结束。我想要的每一张图片，它应该持有一秒钟和位置应该改变到下一个速度，它可以无限循环。 最后，动画如下所示

动画视频

html
css
background-image
css-animations
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-07-16 08:56:41

为了更容易地考虑CSS变量，诀窍是根据宽度高度对位置使用负值。

您有5行、5列和22幅图像，因此将动画分割为22个状态(100/22 = 4.54)。对于每一种状态，我们在x轴上将一个变量从0增加到4，当我们到达4时，我们重置为0，然后增加y轴。

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

​

代码语言：javascript
复制
.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));
  }

}
代码语言：javascript
复制
<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，则此方法是完美的。

​

代码语言：javascript
复制
.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));
  }
}
代码语言：javascript
复制
<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映像：

​

代码语言：javascript
复制
.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));
  }
}
代码语言：javascript
复制
<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>

​

票数 1
EN

Stack Overflow用户

发布于 2019-07-16 04:37:19

​

代码语言：javascript
复制
/*{"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;}
}
代码语言：javascript
复制
<!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>

​

试试这个，希望能帮上忙。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/57049688

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档