Question

以下是我的代码：https://github.com/jtylerm/website-issues

指向github的链接

我正在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>

无法将两张图像从左右滑动到中心

1 个答案: