CSS3 animation-fill-mode 动画保持结束状态：forwards 详解

在编写 CSS3 关键帧动画（@keyframes）时，很多开发者发现元素播放完淡入（fade-in）或位移动画后，会瞬间闪退回初始的原生状态。通过配置 animation-fill-mode: forwards; 即可让元素完美定格在最后一帧。

一、 核心参数取值

• none（默认）：动画播放前后都不应用关键帧中的任何样式；
• forwards（最常用）： 动画结束后，元素保持最后一个关键帧（100% / to）的最终样式；
• backwards：在 animation-delay 等待期间，立即应用第一个关键帧（0% / from）的样式；
• both：同时具备 forwards 与 backwards 的特性。

二、 经典应用代码

.fade-in-slide {
    animation: slideUp 0.6s ease-out forwards;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}