动画不会在半秒帧内立即结束
动画不会在半秒帧内立即结束
提问于 2021-07-17 23:40:38
我创建了一个精灵动画，一切运行良好，但是当设置我自己的动画-填充-模式:前进时，动画只在最后一帧结束一段时间后才结束，在此之前它飞到一个未知的地方，用白色背景填充该区域，谁能告诉我这个原点是什么，我将非常感激。如果其他人知道为什么在制作精灵动画时，当在step ()之间切换时，动画会突然跳动，那就太好了。
background-image: url(../img/sprites/arrow.png);
background-size: 510px 612px;
width: 51px;
height: 51px;
animation: animator 5s steps(1) forwards;
animation-iteration-count: 1;
background-repeat: no-repeat;
display: block;
}
@keyframes animator {
0% {
background-position: 0px 0px;
}
0.23% {
background-position: -51px 0px;
}
0.46% {
background-position: -102px 0px;
}
0.69% {
background-position: -153px 0px;
}
0.92% {
background-position: -204px 0px;
}
1.15% {
background-position: -255px 0px;
}
1.38% {
background-position: -306px 0px;
}
1.61% {
background-position: -357px 0px;
}
1.84% {
background-position: -408px 0px;
}
2.07% {
background-position: -459px 0px;
}
2.3% {
background-position: -510px 0px;
}
2.53% {
background-position: 0px 0px;
}
2.53% {
background-position: -51px -51px;
}
2.76% {
background-position: -102px -51px;
}
2.99% {
background-position: -153px -51px;
}
3.22% {
background-position: -204px -51px;
}
3.45% {
background-position: -255px -51px;
}
3.68% {
background-position: -306px -51px;
}
3.91% {
background-position: -357px -51px;
}
4.14% {
background-position: -408px -51px;
}
4.37% {
background-position: -459px -51px;
}
4.6% {
background-position: -510px -51px;
}
4.83% {
background-position: 0px -51px;
}
4.83% {
background-position: -51px -102px;
}
5.06% {
background-position: -102px -102px;
}
5.29% {
background-position: -153px -102px;
}
5.52% {
background-position: -204px -102px;
}
5.75% {
background-position: -255px -102px;
}
5.98% {
background-position: -306px -102px;
}
6.21% {
background-position: -357px -102px;
}
6.44% {
background-position: -408px -102px;
}
6.67% {
background-position: -459px -102px;
}
6.9% {
background-position: -510px -102px;
}
7.13% {
background-position: 0px -102px;
}
7.13% {
background-position: -51px -153px;
}
7.36% {
background-position: -102px -153px;
}
7.59% {
background-position: -153px -153px;
}
7.82% {
background-position: -204px -153px;
}
8.05% {
background-position: -255px -153px;
}
8.28% {
background-position: -306px -153px;
}
8.51% {
background-position: -357px -153px;
}
8.74% {
background-position: -408px -153px;
}
8.97% {
background-position: -459px -153px;
}
9.2% {
background-position: -510px -153px;
}
9.43% {
background-position: 0px -153px;
}
9.43% {
background-position: -51px -204px;
}
9.66% {
background-position: -102px -204px;
}
9.89% {
background-position: -153px -204px;
}
10.12% {
background-position: -204px -204px;
}
10.35% {
background-position: -255px -204px;
}
10.58% {
background-position: -306px -204px;
}
10.81% {
background-position: -357px -204px;
}
11.04% {
background-position: -408px -204px;
}
11.27% {
background-position: -459px -204px;
}
11.5% {
background-position: -510px -204px;
}
11.73% {
background-position: 0px -204px;
}
11.73% {
background-position: -51px -255px;
}
11.96% {
background-position: -102px -255px;
}
12.19% {
background-position: -153px -255px;
}
12.42% {
background-position: -204px -255px;
}
12.65% {
background-position: -255px -255px;
}
12.88% {
background-position: -306px -255px;
}
13.11% {
background-position: -357px -255px;
}
13.34% {
background-position: -408px -255px;
}
13.57% {
background-position: -459px -255px;
}
13.8% {
background-position: -510px -255px;
}
14.03% {
background-position: 0px -255px;
}
14.03% {
background-position: -51px -306px;
}
14.26% {
background-position: -102px -306px;
}
14.49% {
background-position: -153px -306px;
}
14.72% {
background-position: -204px -306px;
}
14.95% {
background-position: -255px -306px;
}
15.18% {
background-position: -306px -306px;
}
15.41% {
background-position: -357px -306px;
}
15.64% {
background-position: -408px -306px;
}
15.87% {
background-position: -459px -306px;
}
16.1% {
background-position: -510px -306px;
}
16.33% {
background-position: 0px -306px;
}
16.33% {
background-position: -51px -357px;
}
16.56% {
background-position: -102px -357px;
}
16.79% {
background-position: -153px -357px;
}
17.02% {
background-position: -204px -357px;
}
17.25% {
background-position: -255px -357px;
}
17.48% {
background-position: -306px -357px;
}
17.71% {
background-position: -357px -357px;
}
17.94% {
background-position: -408px -357px;
}
18.17% {
background-position: -459px -357px;
}
18.4% {
background-position: -510px -357px;
}
18.63% {
background-position: 0px -357px;
}
18.63% {
background-position: -51px -408px;
}
18.86% {
background-position: -102px -408px;
}
19.09% {
background-position: -153px -408px;
}
19.32% {
background-position: -204px -408px;
}
19.55% {
background-position: -255px -408px;
}
19.78% {
background-position: -306px -408px;
}
20.01% {
background-position: -357px -408px;
}
20.24% {
background-position: -408px -408px;
}
20.47% {
background-position: -459px -408px;
}
20.7% {
background-position: -510px -408px;
}
20.93% {
background-position: 0px -408px;
}
20.93% {
background-position: -51px -459px;
}
21.16% {
background-position: -102px -459px;
}
21.39% {
background-position: -153px -459px;
}
21.62% {
background-position: -204px -459px;
}
21.85% {
background-position: -255px -459px;
}
22.08% {
background-position: -306px -459px;
}
22.31% {
background-position: -357px -459px;
}
22.54% {
background-position: -408px -459px;
}
22.77% {
background-position: -459px -459px;
}
23% {
background-position: -510px -459px;
}
23.23% {
background-position: 0px -459px;
}
23.23% {
background-position: -51px -510px;
}
23.46% {
background-position: -102px -510px;
}
23.69% {
background-position: -153px -510px;
}
23.92% {
background-position: -204px -510px;
}
24.15% {
background-position: -255px -510px;
}
24.38% {
background-position: -306px -510px;
}
24.61% {
background-position: -357px -510px;
}
24.84% {
background-position: -408px -510px;
}
25.07% {
background-position: -459px -510px;
}
25.3% {
background-position: -510px -510px;
}
25.53% {
background-position: 0px -510px;
}
25.53% {
background-position: -51px -561px;
}
25.76% {
background-position: -102px -561px;
}
25.99% {
background-position: -153px -561px;
}
26.22% {
background-position: -204px -561px;
}
26.45% {
background-position: -255px -561px;
}
26.68% {
background-position: -306px -561px;
}
26.91% {
background-position: -357px -561px;
}
27.14% {
background-position: -408px -561px;
}
27.37% {
background-position: -459px -561px;
}
27.6% {
background-position: -510px -561px;
}
27.83% {
background-position: 0px -561px;
}
27.83% {
background-position: -51px -612px;
}
28.06% {
background-position: -102px -612px;
}
28.29% {
background-position: -153px -612px;
}
28.52% {
background-position: -204px -612px;
}
28.75% {
background-position: -255px -612px;
}
28.98% {
background-position: -306px -612px;
}
29.21% {
background-position: -357px -612px;
}
29.44% {
background-position: -408px -612px;
}
29.67% {
background-position: -459px -612px;
}
29.9% {
background-position: -510px -612px;
}
30.13% {
background-position: 0px -612px;
}
50% {
background-position: right bottom;
}
to {
background-position: right bottom;
}
}回答 1
Stack Overflow用户
发布于 2021-07-18 01:57:35
问题似乎是动画关键帧定义的一些最后一帧“遗漏”了背景精灵。因此，有很大一部分动画看起来是空白的。
此代码片段简单地查看了解决方案，它剪切了动画的最后一帧，确保显示的倒数第二帧与显示的最后一帧相同，同时将动画填充模式设置为向前，动画最终外观保持不变。
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.container>.container__header {
width: 100%;
margin: 3% 0;
display: flex;
flex-direction: row;
}
.container>.container__header .figure-1 {
background-image: url(https://i.imgur.com/GWedN7i.png);
background-size: 510px 612px;
width: 51px;
height: 51px;
animation: animator 30s steps(1) forwards;
animation-fill-mode: forwards;
animation-iteration-count: 1;
background-repeat: no-repeat;
display: block;
}
@keyframes animator {
0% {
background-position: 0px 0px;
}
0.23% {
background-position: -51px 0px;
}
0.46% {
background-position: -102px 0px;
}
0.69% {
background-position: -153px 0px;
}
0.92% {
background-position: -204px 0px;
}
1.15% {
background-position: -255px 0px;
}
1.38% {
background-position: -306px 0px;
}
1.61% {
background-position: -357px 0px;
}
1.84% {
background-position: -408px 0px;
}
2.07% {
background-position: -459px 0px;
}
2.3% {
background-position: -510px 0px;
}
2.53% {
background-position: 0px 0px;
}
2.53% {
background-position: -51px -51px;
}
2.76% {
background-position: -102px -51px;
}
2.99% {
background-position: -153px -51px;
}
3.22% {
background-position: -204px -51px;
}
3.45% {
background-position: -255px -51px;
}
3.68% {
background-position: -306px -51px;
}
3.91% {
background-position: -357px -51px;
}
4.14% {
background-position: -408px -51px;
}
4.37% {
background-position: -459px -51px;
}
4.6% {
background-position: -510px -51px;
}
4.83% {
background-position: 0px -51px;
}
4.83% {
background-position: -51px -102px;
}
5.06% {
background-position: -102px -102px;
}
5.29% {
background-position: -153px -102px;
}
5.52% {
background-position: -204px -102px;
}
5.75% {
background-position: -255px -102px;
}
5.98% {
background-position: -306px -102px;
}
6.21% {
background-position: -357px -102px;
}
6.44% {
background-position: -408px -102px;
}
6.67% {
background-position: -459px -102px;
}
6.9% {
background-position: -510px -102px;
}
7.13% {
background-position: 0px -102px;
}
7.13% {
background-position: -51px -153px;
}
7.36% {
background-position: -102px -153px;
}
7.59% {
background-position: -153px -153px;
}
7.82% {
background-position: -204px -153px;
}
8.05% {
background-position: -255px -153px;
}
8.28% {
background-position: -306px -153px;
}
8.51% {
background-position: -357px -153px;
}
8.74% {
background-position: -408px -153px;
}
8.97% {
background-position: -459px -153px;
}
9.2% {
background-position: -510px -153px;
}
9.43% {
background-position: 0px -153px;
}
9.43% {
background-position: -51px -204px;
}
9.66% {
background-position: -102px -204px;
}
9.89% {
background-position: -153px -204px;
}
10.12% {
background-position: -204px -204px;
}
10.35% {
background-position: -255px -204px;
}
10.58% {
background-position: -306px -204px;
}
10.81% {
background-position: -357px -204px;
}
11.04% {
background-position: -408px -204px;
}
11.27% {
background-position: -459px -204px;
}
11.5% {
background-position: -510px -204px;
}
11.73% {
background-position: 0px -204px;
}
11.73% {
background-position: -51px -255px;
}
11.96% {
background-position: -102px -255px;
}
12.19% {
background-position: -153px -255px;
}
12.42% {
background-position: -204px -255px;
}
12.65% {
background-position: -255px -255px;
}
12.88% {
background-position: -306px -255px;
}
13.11% {
background-position: -357px -255px;
}
13.34% {
background-position: -408px -255px;
}
13.57% {
background-position: -459px -255px;
}
13.8% {
background-position: -510px -255px;
}
14.03% {
background-position: 0px -255px;
}
14.03% {
background-position: -51px -306px;
}
14.26% {
background-position: -102px -306px;
}
14.49% {
background-position: -153px -306px;
}
14.72% {
background-position: -204px -306px;
}
14.95% {
background-position: -255px -306px;
}
15.18% {
background-position: -306px -306px;
}
15.41% {
background-position: -357px -306px;
}
15.64% {
background-position: -408px -306px;
}
15.87% {
background-position: -459px -306px;
}
16.1% {
background-position: -510px -306px;
}
16.33% {
background-position: 0px -306px;
}
16.33% {
background-position: -51px -357px;
}
16.56% {
background-position: -102px -357px;
}
16.79% {
background-position: -153px -357px;
}
17.02% {
background-position: -204px -357px;
}
17.25% {
background-position: -255px -357px;
}
17.48% {
background-position: -306px -357px;
}
17.71% {
background-position: -357px -357px;
}
17.94% {
background-position: -408px -357px;
}
18.17% {
background-position: -459px -357px;
}
18.4% {
background-position: -510px -357px;
}
18.63% {
background-position: 0px -357px;
}
18.63% {
background-position: -51px -408px;
}
18.86% {
background-position: -102px -408px;
}
19.09% {
background-position: -153px -408px;
}
19.32% {
background-position: -204px -408px;
}
19.55% {
background-position: -255px -408px;
}
19.78% {
background-position: -306px -408px;
}
20.01% {
background-position: -357px -408px;
}
20.24% {
background-position: -408px -408px;
}
20.47% {
background-position: -459px -408px;
}
20.7% {
background-position: -510px -408px;
}
20.93% {
background-position: 0px -408px;
}
20.93% {
background-position: -51px -459px;
}
21.16% {
background-position: -102px -459px;
}
21.39% {
background-position: -153px -459px;
}
21.62% {
background-position: -204px -459px;
}
21.85% {
background-position: -255px -459px;
}
22.08% {
background-position: -306px -459px;
}
22.31% {
background-position: -357px -459px;
}
22.54% {
background-position: -408px -459px;
}
22.77% {
background-position: -459px -459px;
}
23% {
background-position: -510px -459px;
}
23.23% {
background-position: 0px -459px;
}
23.23% {
background-position: -51px -510px;
}
23.46% {
background-position: -102px -510px;
}
23.69% {
background-position: -153px -510px;
}
23.92% {
background-position: -204px -510px;
}
24.15% {
background-position: -255px -510px;
}
24.38% {
background-position: -306px -510px;
}
24.61% {
background-position: -357px -510px;
}
24.84% {
background-position: -408px -510px;
}
25.07% {
background-position: -459px -510px;
}
25.3% {
background-position: -510px -510px;
}
25.53% {
background-position: 0px -510px;
}
25.53% {
background-position: -51px -561px;
}
25.76% {
background-position: -102px -561px;
}
25.99% {
background-position: -153px -561px;
}
26.22% {
background-position: -204px -561px;
}
26.45% {
background-position: -255px -561px;
}
26.68% {
background-position: -306px -561px;
}
26.91% {
background-position: -357px -561px;
}
27.14% {
background-position: -408px -561px;
}
100% {
background-position: -408px -561px;
}
}<div class="container">
<div class="container__header">
<figure class="figure-1"></figure>
<figure class="figure-2"></figure>
<figure class="figure-3"></figure>
<figure class="figure-4"></figure>
</div>
</div>
更新:有时也会有明显的闪烁。如果我们查看关键帧设置，我们可以看到背景图像在设置left 0和left -510px之间移动。也就是说，它沿着一行移动，然后顶部设置递增，左侧从0到-510px。
然而，图像的自然尺寸是510x612，因此在每行的末尾，背景图像被完全移走，因此出现一个白色边框，导致闪烁。
此代码片段采用上面的代码片段，并将-510px更改为-459px -以便重复每行的最后一帧。这只是为了证明没有闪烁，当然最后一帧的曝光时间是其他帧的两倍。对于5秒的绘制时间，这并不是很明显，但是对于一个完整的解决方案，你需要重新计算关键帧中的%点，所以每个点都像现在一样取0.23，但删除了重复的帧。
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.container > .container__header {
width: 100%;
margin: 3% 0;
display: flex;
flex-direction: row;
}
.container > .container__header .figure-1 {
background-image: url(https://i.imgur.com/GWedN7i.png);
background-size: 510px 612px;
width: 51px;
height: 51px;
animation: animator 5s steps(1) forwards;
animation-fill-modes: forwards;
animation-iteration-count: 1;
background-repeat: no-repeat;
display: block;
}
@keyframes animator {
0% {
background-position: 0px 0px;
}
0.23% {
background-position: -51px 0px;
}
0.46% {
background-position: -102px 0px;
}
0.69% {
background-position: -153px 0px;
}
0.92% {
background-position: -204px 0px;
}
1.15% {
background-position: -255px 0px;
}
1.38% {
background-position: -306px 0px;
}
1.61% {
background-position: -357px 0px;
}
1.84% {
background-position: -408px 0px;
}
2.07% {
background-position: -459px 0px;
}
2.3% {
background-position: -459px 0px;
}
2.53% {
background-position: 0px 0px;
}
2.53% {
background-position: -51px -51px;
}
2.76% {
background-position: -102px -51px;
}
2.99% {
background-position: -153px -51px;
}
3.22% {
background-position: -204px -51px;
}
3.45% {
background-position: -255px -51px;
}
3.68% {
background-position: -306px -51px;
}
3.91% {
background-position: -357px -51px;
}
4.14% {
background-position: -408px -51px;
}
4.37% {
background-position: -459px -51px;
}
4.6% {
background-position: -459px -51px;
}
4.83% {
background-position: 0px -51px;
}
4.83% {
background-position: -51px -102px;
}
5.06% {
background-position: -102px -102px;
}
5.29% {
background-position: -153px -102px;
}
5.52% {
background-position: -204px -102px;
}
5.75% {
background-position: -255px -102px;
}
5.98% {
background-position: -306px -102px;
}
6.21% {
background-position: -357px -102px;
}
6.44% {
background-position: -408px -102px;
}
6.67% {
background-position: -459px -102px;
}
6.9% {
background-position: -459px -102px;
}
7.13% {
background-position: 0px -102px;
}
7.13% {
background-position: -51px -153px;
}
7.36% {
background-position: -102px -153px;
}
7.59% {
background-position: -153px -153px;
}
7.82% {
background-position: -204px -153px;
}
8.05% {
background-position: -255px -153px;
}
8.28% {
background-position: -306px -153px;
}
8.51% {
background-position: -357px -153px;
}
8.74% {
background-position: -408px -153px;
}
8.97% {
background-position: -459px -153px;
}
9.2% {
background-position: -459px -153px;
}
9.43% {
background-position: 0px -153px;
}
9.43% {
background-position: -51px -204px;
}
9.66% {
background-position: -102px -204px;
}
9.89% {
background-position: -153px -204px;
}
10.12% {
background-position: -204px -204px;
}
10.35% {
background-position: -255px -204px;
}
10.58% {
background-position: -306px -204px;
}
10.81% {
background-position: -357px -204px;
}
11.04% {
background-position: -408px -204px;
}
11.27% {
background-position: -459px -204px;
}
11.5% {
background-position: -459px -204px;
}
11.73% {
background-position: 0px -204px;
}
11.73% {
background-position: -51px -255px;
}
11.96% {
background-position: -102px -255px;
}
12.19% {
background-position: -153px -255px;
}
12.42% {
background-position: -204px -255px;
}
12.65% {
background-position: -255px -255px;
}
12.88% {
background-position: -306px -255px;
}
13.11% {
background-position: -357px -255px;
}
13.34% {
background-position: -408px -255px;
}
13.57% {
background-position: -459px -255px;
}
13.8% {
background-position: -459px -255px;
}
14.03% {
background-position: 0px -255px;
}
14.03% {
background-position: -51px -306px;
}
14.26% {
background-position: -102px -306px;
}
14.49% {
background-position: -153px -306px;
}
14.72% {
background-position: -204px -306px;
}
14.95% {
background-position: -255px -306px;
}
15.18% {
background-position: -306px -306px;
}
15.41% {
background-position: -357px -306px;
}
15.64% {
background-position: -408px -306px;
}
15.87% {
background-position: -459px -306px;
}
16.1% {
background-position: -459px -306px;
}
16.33% {
background-position: 0px -306px;
}
16.33% {
background-position: -51px -357px;
}
16.56% {
background-position: -102px -357px;
}
16.79% {
background-position: -153px -357px;
}
17.02% {
background-position: -204px -357px;
}
17.25% {
background-position: -255px -357px;
}
17.48% {
background-position: -306px -357px;
}
17.71% {
background-position: -357px -357px;
}
17.94% {
background-position: -408px -357px;
}
18.17% {
background-position: -459px -357px;
}
18.4% {
background-position: -459px -357px;
}
18.63% {
background-position: 0px -357px;
}
18.63% {
background-position: -51px -408px;
}
18.86% {
background-position: -102px -408px;
}
19.09% {
background-position: -153px -408px;
}
19.32% {
background-position: -204px -408px;
}
19.55% {
background-position: -255px -408px;
}
19.78% {
background-position: -306px -408px;
}
20.01% {
background-position: -357px -408px;
}
20.24% {
background-position: -408px -408px;
}
20.47% {
background-position: -459px -408px;
}
20.7% {
background-position: -459px -408px;
}
20.93% {
background-position: 0px -408px;
}
20.93% {
background-position: -51px -459px;
}
21.16% {
background-position: -102px -459px;
}
21.39% {
background-position: -153px -459px;
}
21.62% {
background-position: -204px -459px;
}
21.85% {
background-position: -255px -459px;
}
22.08% {
background-position: -306px -459px;
}
22.31% {
background-position: -357px -459px;
}
22.54% {
background-position: -408px -459px;
}
22.77% {
background-position: -459px -459px;
}
23% {
background-position: -459px -459px;
}
23.23% {
background-position: 0px -459px;
}
23.23% {
background-position: -51px -510px;
}
23.46% {
background-position: -102px -510px;
}
23.69% {
background-position: -153px -510px;
}
23.92% {
background-position: -204px -510px;
}
24.15% {
background-position: -255px -510px;
}
24.38% {
background-position: -306px -510px;
}
24.61% {
background-position: -357px -510px;
}
24.84% {
background-position: -408px -510px;
}
25.07% {
background-position: -459px -510px;
}
25.3% {
background-position: -459px -510px;
}
25.53% {
background-position: 0px -510px;
}
25.53% {
background-position: -51px -561px;
}
25.76% {
background-position: -102px -561px;
}
25.99% {
background-position: -153px -561px;
}
26.22% {
background-position: -204px -561px;
}
26.45% {
background-position: -255px -561px;
}
26.68% {
background-position: -306px -561px;
}
26.91% {
background-position: -357px -561px;
}
27.14% {
background-position: -408px -561px;
}
100% {
background-position: right bottom;
}
}<div class="container">
<div class="container__header">
<figure class="figure-1"></figure>
<figure class="figure-2"></figure>
<figure class="figure-3"></figure>
<figure class="figure-4"></figure>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68421979
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号