如何为从上到下移动的容器设置动画，并且它不应该从上到下出现，而是从下到上继续答案

【问题标题】：How to animate a container that moves from top to bottom and again it should not appear from top to bottom but continue from bottom to top如何为从上到下移动的容器设置动画，并且它不应该从上到下出现，而是从下到上继续
【发布时间】：2023-03-22 22:48:01
【问题描述】：

对于上下文检查这个https://www.intercom.com/ url 并导航到People are talk 容器，该容器从左到右移动。我的代码需要相同的动画，但我做不到。这是我的代码框代码的https://codesandbox.io/s/angry-elion-94spb?file=/src/styles.css 的网址。

【问题讨论】：

您对所需内容的描述与人们正在谈论的系统不匹配，该系统的元素不断移动。你想连续向上移动你的元素吗？还是您希望它在向上和向下之间交替？
我希望元素不断向上移动。

标签： css reactjs

【解决方案1】：

将move动画改成这样：

@keyframes move {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

您之前的代码是从下到上，然后立即重置为下。这段代码从下往上，然后再往下，不断重复。

【讨论】：