css3 动画：如何播放 css3 动画并保持显示最后一帧？ [复制]答案

【问题标题】：css3 animation: how to play css3 animation and keep the last frame displayed? [duplicate]css3 动画：如何播放 css3 动画并保持显示最后一帧？ [复制]
【发布时间】：2023-03-10 15:05:02
【问题描述】：

我正在尝试向下滑动一个 div 元素。所以我只是使用：

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

.moveDown {
    animation:mymove 1s ease-out forwards;
    -webkit-animation:mymove 1s ease-out infinite;
}
@keyframes mymove { 
    from {top:0px; opacity: 0;}
    to {top:100px; opacity: 1}
}

@-webkit-keyframes mymove {
    from {top:0px; opacity: 0;}
    to {top:100px; opacity: 1;}
}

效果很好：我的 Box 平稳地移动到底部 100 像素，但是当动画结束时，它会跳到它的初始位置：关于如何实现它的任何想法？

我不想用jquery的animate函数，因为jquery不够流畅。

【问题讨论】：

标签： jquery css

【解决方案1】：

为了保留最后一个关键帧，需要在 .movedown 类中添加以下行

-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

【讨论】：

【解决方案2】：

一种简单的方法是使用 CSS 过渡而不是 CSS 动画：

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

使用您编写的相同 jQuery。

【讨论】：