檢測CSS動畫停止

Question

我的網站中有一個太空船對象，該對象在屏幕中從左到右（到查看端口）移動。

一旦上述太空飛船對象到達末端（屏幕視口），我需要顯示另一個太空飛船對象從右向左移動。

問題

我試圖給第二個太空飛船對象“動畫延遲”，但是它沒有按照我的意願工作。 因為瀏覽器的寬度因屏幕而異。

這是我的代碼。

 .spaceship-1 img { width: 100px; animation: spaceship-1 10s ease-in-out 1; animation-fill-mode: forwards; } @-webkit-keyframes spaceship-1 { 0% { transform: translateX(0); } 100% { transform: translateX(100vw); } } .spaceship-2 img { width: 100px; animation: spaceship-2 10s ease-in-out 1; animation-fill-mode: forwards; animation-delay: 5s; position: absolute; right: 0; bottom: 15px; } @-webkit-keyframes spaceship-2 { 0% { transform: translateX(0); } 100% { transform: translateX(-100vw); } } 

 <div class="spaceship-1"> <img src="http://i63.tinypic.com/24nguhx.png" alt=""> </div> <div class="spaceship-2"> <img src="http://i68.tinypic.com/2lsxjpx.png" alt=""> </div> 

這是Jsfiddle有什么想法嗎？

Answer 1

如果要讓第二個動畫在第一個動畫之后立即開始，則必須將animation-delay設置為等於第一個animation-duration ，女巫為10s。 而且，您還應該將兩者都設為絕對。

 body{ background:#f6f6f6; overflow-x:hidden; } .spaceship-1 img{ width:100px; animation: spaceship-1 10s ease-in-out 1 ; animation-fill-mode: forwards; position:absolute; left: 0; top: 10px; } @-webkit-keyframes spaceship-1 { 0% { transform: translateX(0); } 100% { transform: translateX(calc(100vw - 100px)) ; } } .spaceship-2 img{ width:100px; animation: spaceship-2 10s ease-in-out 1 ; animation-fill-mode: forwards; animation-delay:10s; position:absolute; transform: rotate(180deg); right: 0; bottom: 10px; } @-webkit-keyframes spaceship-2 { 0% { transform: translateX(0) rotate(180deg); } 100% { transform: translateX(calc(-100vw + 100px)) rotate(180deg); } } 

 <div class="spaceship-1"> <img src="http://i63.tinypic.com/24nguhx.png" alt=""> </div> <div class="spaceship-2"> <img src="http://i63.tinypic.com/24nguhx.png" alt=""> </div> 

小提琴： https ： //jsfiddle.net/sph8f6ty/