每个 CSS translateX 动画后的延迟

Question

我正在使用 CSS 转换 translateX 将 Gif 从左向右移动。 gif 在 Gif 动画结束时停止并打嗝，但 Gif 仍在沿 X 坐标平移，所以看起来不太好！

如何在 translateX 的末尾添加暂停/延迟。

Stackoverflow 上有一个关于 Rotate 的类似问题，答案如下代码：

 66%, 100% {
  transform:rotatey(0deg);
}

但是对于我的一生，我不知道如何申请我的。

.gif-image {
	width: 30%;
  animation-name: slideLeftToRight;
  animation-duration: 20s; 
  animation-iteration-count: infinite; 
}

@keyframes slideLeftToRight {
  from {transform: translateX(0px)} 
  to {transform: translateX(400px)}
}




body{
	background-color: #6dba94;
}

<div class="container">
<img class="gif-image" src="https://cdn.dribbble.com/users/672882/screenshots/1972683/character-rig-800x600.gif" />
</div>

Answer 1

这是一个有趣的问题，因为您不能像在大多数情况下一样使用过渡延迟，因为 GIF 永远不会停止。因此，您的情况基本上归结为对动画进行计时以与 GIF 计时相匹配。这将很难做到，尤其是如果您没有自己制作 GIF。 （如果你这样做了，也许你会更容易准确地知道这个人什么时候开始和停止走路，以毫秒为单位。）

也就是说，困难并不意味着不可能。

开始之前的重要提示： GIF 会不断播放，即使您在 JS Fiddle 或 CodePen 或 Stack Snippet 或其他任何东西中更新您的代码。因此，您最终可能会认为您的动画时间已全部关闭，而实际上并非如此。在对此进行测试时，我复制了我在 CodePen 中使用的 URL，然后继续关闭选项卡，重新打开一个新选项卡，然后将 URL 粘贴到那里，以便从头开始使用 GIF 重新加载它。这很乏味，但我不知道更好的方法。

无论如何...

首先，您必须弄清楚 GIF 的持续时间，因为将动画持续时间基于 GIF 的持续时间将使我们的生活轻松一百万倍。我最初猜测它会是一个不错的整数，比如正好 5 秒，但在测试中它似乎在几次迭代后就消失了，就像它实际上稍微长一些一样。我估计是 5.15 秒。

所以让我们让我们的家伙在他打完嗝后向右走。首先我们要弄清楚他在开始走路之前需要多长时间。 （如果你准确地知道这个数字，你的生活会轻松很多。我不得不使用猜测和检查。）

通过一些测试，我发现如果 GIF 的长度为 5.15 秒（5150 毫秒），他开始进入 GIF 的大约 42% 或大约 2163 毫秒。所以直到那时我们才开始翻译：

@keyframes animationName {
  0% {
    transform: translateX(0px);
  }
  42% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(200px);
  }
}

这基本上给了我们这个：

.gif-image {
	width: 250px;
	animation-iteration-count: infinite;
	animation-name: slideLeftToRightRepeating;
  animation-duration: 5.15s;
}
@keyframes slideLeftToRightRepeating {
	0% {
		transform: translateX(0px);
	}
	42% {
		transform: translateX(0px);
	}
	100% {
		transform: translateX(200px);
	}
}
body {
	background-color: #6dba94;
}

<div class="container">
  <div><img class="gif-image" src="https://cdn.dribbble.com/users/672882/screenshots/1972683/character-rig-800x600.gif" /></div>
</div>

一旦我们完成了该部分，如果您希望他像您在问题中提出的那样以较长的动画持续时间继续侧身行走，只需将我们的动画持续时间乘以您想要重复动作的次数即可，然后将我们的百分比除以相同的数量。

假设你想让他重复动画五次。我们的动画持续时间现在变为 (5 * 5.15s) = 20.75s。

然后，在我们的百分比中，每 20% 的动画（因为我们将其分成五分之一）将重复我们上面建立的模式。因此，在 20% 标记处，我们的效果与上述 100% 标记处相同。

我们计算出他开始走大约 42% 的路，所以我们取 20% 的 42% 来得到 8.4%。我们的关键帧现在看起来像这样：

@keyframes animationName {
  0% {
    transform: translateX(0px);
  }
  8.4% {
    transform: translateX(0px);
  }
  20% {
    transform: translateX(200px);
  }
  28.4% {
    transform: translateX(200px);
  }
  40% {
    transform: translateX(400px);
  }
  .....
}

在实践中，事实证明这并不完全正确（我猜我 42% 的估计并不完美）。稍微修改一下我们的数字，我得出了 0%、11.5%、20%、31.5% 等。

最后，我们有100% { transform: translateX(1000px); }。这是 200px 的五次翻译。

这是一个很好的起点，事情进展顺利，但时间并不准确。我会让你自己去弄乱它，以使数字完全正确，并调整他每次行走的距离以适应你的情况。希望这会有所帮助。

请注意，如果您以固定单位设置 GIF 的宽度和平移距离，我认为您的生活会更轻松，否则您可能会发现使用相对单位（如百分比），您的人似乎要么在原地行走或在屏幕上占据很大的范围，具体取决于屏幕的宽度。

.gif-image {
  width: 250px;
  animation-iteration-count: infinite;
  animation-duration: 20.75s;
  animation-name: slideLeftToRightSlowly;
}

@keyframes slideLeftToRightRepeating {
  0% {
    transform: translateX(0x);
  }
  42% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(200px);
  }
}

@keyframes slideLeftToRightSlowly {
  0% {
    transform: translateX(0px);
  }
  11.5% {
    transform: translateX(0px);
  }
  20% {
    transform: translateX(200px);
  }
  31.5% {
    transform: translateX(200px);
  }
  40% {
    transform: translateX(400px);
  }
  51.5% {
    transform: translateX(400px);
  }
  60% {
    transform: translateX(600px);
  }
  71.5% {
    transform: translateX(600px);
  }
  80% {
    transform: translateX(800px);
  }
  91.5% {
    transform: translateX(800px);
  }
  100% {
    transform: translateX(1000px);
  }
}

body {
  background-color: #6dba94;
}

<div class="container">
  <div><img class="gif-image" src="https://cdn.dribbble.com/users/672882/screenshots/1972683/character-rig-800x600.gif" /></div>
</div>