javascript - 使用 css 将 div 移动到新位置然后停在那里

Question

是否有一种纯 CSS 方法可以将 div 从一个地方移动到另一个地方并停止。我所拥有的跳回到原来的地方。

#animate {
  position: absolute;
  top: 0px;
  left: 0px; 
  animation: move 3s ease;
}



@keyframes move {
   from { transform: translateX(0px); }
   to { transform: translateX(500px); }
}

如果我为此需要 JS，有没有办法在动画结束时设置条件而不是用超时移动它？

Answer 1

尝试添加:

#animate {
  // other styles...
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

你可以看到这个工作 here .

归功于 this answer .