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）要解决此问题，您可以在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

你应该再创建一个类（.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;}
}

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

2 个答案: