使用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。