有麻烦两个图像从左边和右边滑动到中间

这里的链接到github上我的代码：https://github.com/jtylerm/website-issues 有麻烦两个图像从左边和右边滑动到中间

我建立的网站reactJS。我试着用CSS对两个图像进行动画制作，但它不能正确动画。两幅图像部分滑动，然后“跳”到中心。这两个图像需要重叠，这就是为什么我在CSS中列出了z-index。

我不反对使用JavaScript来动画图像，如果这是比使用CSS更好的解决方案。

请帮忙！

谢谢！

来源

2017-06-29 jtylerm

欢迎的StackOverflow，你的问题应该包含一个[**最小的，完整的和可验证的实例**]（http://stackoverflow.com/help/mcve）。 – hungerstar

使用css3进行动画。使用js切换类。 – Medda86

我不确定图像需要结束的位置，但这是如何让它们顺利滑动的示例。

要让绿色图像位于顶部，请将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>

来源

2017-06-29 14:26:31 Gerard

这很接近。我需要两幅图像在我的情况下完全重叠。当你在我链接的站点浏览器中查看时，可以看到我正在尝试连接画架图像和监视器图像。这两个实际上符合我链接的代码。他们只是做得很糟糕 – jtylerm

代码被更新为完全重叠。 – Gerard

谢谢杰拉德！这解决了我的问题。我点击接受你答复的答案。再次感谢 – jtylerm

有麻烦两个图像从左边和右边滑动到中间

回答

相关问题