使元素在 CSS 的动画延迟期间保持隐藏

Question

我有一个元素可以从我希望在页面上看起来像的元素在屏幕上滑动，然后在另一侧滑动 "land"。我已经把动画弄下来了，但在延迟期间，图像似乎只是停留在页面上等待。延迟是因为我有另一个动画需要在这个动画开始之前完成。

这是我的 CSS 代码，我通过 class 和反应前端

引用它

.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) 要解决此问题，您可以在 css 中设置 left 属性，使其位于 0%，这样当您的动画开始时，它不必移动到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

检查代码笔：https://codepen.io/sasssssha/pen/Nayzpg

您应该再创建一个 class (.testerAnimated) 并将此 class 名称添加到具有 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;}
}

使元素在 CSS 的动画延迟期间保持隐藏

Make element remain hidden during animation-delay in CSS

html

javascript

css

animation

transformation