使元素在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;} 
}