css - 如何使用 css3 动画从左向右移动图像？

Question

这里我尝试从左到右加载 3 张图像，然后等待 3 秒，然后再次从左到右加载。此过程每 5 秒持续一次。这里我不知道如何从左到右加载它，加载的图像应该只在一行上。

我的意思是在这个例子中，图像从左向右移动，但它们会转到下一行。我不想去下一行。他们只是一个一个地加载，从左到右只有一些差距。

在此[示例]中1 ，值淡入淡出。但我想像从左到右那样移动/从下到上加载图像(出现)/从上到下加载(出现)图像

Answer 1

如果您不希望元素转到下一行，则需要它们的总宽度小于容器的 100%。

10 像素 + 80% + 10 像素 + 80% + 10 像素 + 80% > 100%

---

编辑

说明一下:问题是你的右边距是80%

50%  {margin-right: 80%;}

这意味着页面的 80%，太多了。您需要做的是为最后两个 对象的左边距设置动画，而不是为所有三个对象的右边距设置动画。您可以拥有的最大左边距应该在 40% 左右

50%  {margin-left: 40%;}

请注意，您不应该在 HTML 中拥有多个具有相同 ID 的元素，但您可以拥有多个类，因此您的 div 应该看起来像

<div class="ui-block-b subdiv">

另请注意，您需要使用 /

关闭您的 img 标签

<img src="img/images.jpg"/>