Jquery css3动画：如何播放css3动画并保持最后一帧的显示？

我正试图滑下一个div元素。 所以我只使用：

$("#myBox").addClass("moveDown");

---

这很好：我的盒子以100像素的速度平稳地移动到底部，但当动画结束时，它会跳到初始位置：你知道如何实现吗

---

我不想使用jquery的动画功能，因为jquery不够平滑。

一个简单的方法是使用CSS转换而不是CSS动画：

#myBox {
  top: 0;
  opacity: 0;
  transition: all 1s;
}
#myBox.moveDown {
  top: 100px;
  opacity: 1;
}

---

与您编写的jQuery相同。

为了保留最后一个关键帧，需要在

类中添加以下行

-webkit-animation-fill-mode: forwards
animation-fill-mode: forwards
-moz-animation-fill-mode: forwards
-ms-animation-fill-mode: forwards

范例

.moveDown {
 animation:mymove 1s ease-out forwards;
 -webkit-animation:mymove 1s ease-out infinite;
 -webkit-animation-fill-mode: forwards
 animation-fill-mode: forwards
 -moz-animation-fill-mode: forwards
 -ms-animation-fill-mode: forwards

.moveDown {
 animation:mymove 1s ease-out forwards;
 -webkit-animation:mymove 1s ease-out infinite;
 -webkit-animation-fill-mode: forwards
 animation-fill-mode: forwards
 -moz-animation-fill-mode: forwards
 -ms-animation-fill-mode: forwards