使用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;
}

您可以在這里看到此工作。

相信這個答案 。