使元素在CSS中的動畫延遲過程中保持隱藏狀態

Question

我有一個元素可以從屏幕上滑過，然後在相反的一側滑動並「降落」。我已經下了動畫，但似乎在延遲期間，圖像只是在等待的頁面上。延遲是因爲我有另一個動畫需要在這個動畫開始之前完成。

這裏是我的CSS代碼，我有一個反應前端

.tester{ 
    position: relative; 
    animation-name: test_css_moving_sideways; 
    animation-duration: 3s; 
    animation-iteration-count: 1; 
    animation-direction: linear; 
    left: 90%; 
    animation-delay: 2s; 
} 


@keyframes test_css_moving_sideways { 
    0% { left: 0px; top: 0px;} 
    100% { left: 90%; top: 0px; } 
} 

Answer 1

1）爲了解決這個問題通過類引用它，這樣它坐落在0％你可以在CSS設置left屬性，以便再當你的動畫開始時，它不必移動到0％（動畫開始的地方）的左邊，因爲它已經在那裏:)

2）添加animation-fill-mode - 這控制着動畫結束時會發生什麼。這個值設置爲forwards將從動畫結束的CSS應用於對象

所以修改你的CSS：

.tester{ 
    position: relative; 
    animation-name: test_css_moving_sideways; 
    animation-duration: 3s; 
    animation-iteration-count: 1; 
    animation-direction: linear; 
    left: 0%; 
    animation-delay: 2s; 
    animation-fill-mode: none, forwards; 
} 

Answer 2

檢查codepen：https://codepen.io/sasssssha/pen/Nayzpg

您應該創建一個多個類（ .testerAnimated），並將該類名添加到帶有js函數的元素（如果您想在特定時間內使用動畫），或者您可以一次添加它（在這種情況下，動畫會在頁面加載時啓動）。檢查它：

.testerAnimated{ 
    animation-name: test_css_moving_sideways; 
    animation-duration: 4.5s;   //play with it 
    animation-delay: 2s; 
    }  

    .tester{ 
    position: relative; 
    animation-name: test_css_moving_sideways; 
    left: 90%; 
    visibility:hidden; 
} 


@keyframes test_css_moving_sideways { 
    0% { left: 0px; top: 0px;visibility:visible;} 
    100% { left: 90%; top: 0px;visibility:visible;} 
}