无法让两个图像从左右滑动到中心

Question

这是 github 的链接以及我的代码：https://github.com/jtylerm/website-issues

我正在用 reactJS 构建网站。我尝试使用 CSS 为这两个图像设置动画，但动画不正确。这两个图像部分滑入然后“跳”到中心。这两个图像需要重叠，这就是我在 CSS 中列出 z-index 的原因。

我不反对使用 javascript 为图像制作动画，如果这比使用 CSS 更好的话。

请帮忙！

谢谢！

Answer 1

我不确定图像需要在哪里结束，但这是一个如何让它们顺利滑入的示例。

要让绿色图像位于顶部，请将z-index: -1 分配给紫色图像。

.from-left {
  position: absolute;
  left: -100px;
  animation: move-right 3s ease forwards;
}

.from-right {
  position: absolute;
  right: -100px;
  animation: move-left 3s ease forwards;
}

@keyframes move-right {
  100% {
    left: calc(50% - 50px);
  }
}

@keyframes move-left {
  100% {
    right: calc(50% - 50px);
  }
}

<div class="container">
  <img class="from-left" src="http://placehold.it/100/00ff00">
  <img class="from-right" src="http://placehold.it/100/0000ff">
</div>