有麻煩兩個圖像從左邊和右邊滑動到中間

這裏的鏈接到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

有麻煩兩個圖像從左邊和右邊滑動到中間

回答

相關問題