Question

我正在使用CSS transform 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的话。（如果你这样做了，也许你可以更容易地确定这个家伙何时开始和停止走路，以毫秒为单位。）

那就是说，艰难并不意味着不可能。

在我们开始之前的重要提示：即使您在JS Fiddle或CodePen或Stack Snippet中更新代码或者有什么东西，GIF也会一遍又一遍地播放。所以你最终可能会认为你的动画时间完全没有了。在测试中，我在CodePen中复制了我正在使用的URL，然后保持关闭选项卡，重新打开一个新标签，并将URL粘贴到那里，从GIF开始重新加载它。这很乏味，但我不知道更好的方法。

总之...

首先你必须弄清楚GIF持续多长时间，因为它会让我们的生命在GIF持续时间的基础上更容易将动画持续时间定为百万倍。我最初猜测它是一个很好的圆形数字，恰好是5秒，但在测试中它似乎在几次迭代后下降，就像它实际上稍微长一点。我正在以5.15秒的速度进行比赛。

因此，当他完成打嗝时，让我们的家伙走向右边。首先，我们要弄清楚他开始走路之前需要多长时间。（如果你完全知道这个数字，你的生活会更容易。我不得不使用猜测和检查。）

通过一些测试，我发现如果GIF长5.15秒（5150毫秒），他开始走大约42％进入GIF，或大约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.75秒。

然后，在我们的百分比中，每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>

每个CSS translateX动画后延迟

1 个答案: