在网页开发中，我们经常需要用CSS动画来增强交互体验。但默认情况下，动画在延迟等待阶段或结束之后，元素并不会应用动画里的关键帧样式，而是使用自身原本的样式。如果希望动画还没开始播放时元素就呈现动画起始状态的样子，就需要借助animation-fill-mode属性来设置。
什么是animation-fill-mode
animation-fill-mode用来规定动画在播放前（延迟期）和播放后，是否把动画效果应用到元素上。它主要包含以下几个常用值：
- none：默认值，动画执行前后都不会应用关键帧样式。
- forwards：动画结束后，元素保留最后一帧的样式。
- backwards：动画在延迟等待期间，元素应用第一帧的样式。
- both：同时具备forwards和backwards的效果。
如何设置未播放时的样式
当我们给动画设置了delay延迟，又希望元素在等待期间就显示动画开头的样子，应该使用backwards或者both。下面是一段示例：
/* 定义一个淡入并上移的动画 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 元素在动画未播放时（延迟期）就显示起始帧 */
.box {
width: 200px;
height: 100px;
background: #3498db;
animation-name: fadeInUp;
animation-duration: 1s;
animation-delay: 2s;
/* 关键：延迟期间应用第一帧样式 */
animation-fill-mode: backwards;
}
使用both的场景
如果既想延迟期间显示开头样式，又想结束后保持结尾样式，可以写成：
.card {
animation: fadeInUp 1s 2s both;
}
注意事项
在HTML里提到标签名称时要转义，例如我们常把样式写在<style>标签中。使用animation-fill-mode时，要确保动画的起始帧（from）里已经写明你期望的未播放样式，否则backwards也不会生效。另外，如果动画被设置成infinite无限循环，fill-mode的forwards部分就没有意义了。
简单来说，设置动画未播放时元素的CSS样式，核心就是给元素加上animation-fill-mode: backwards或both，并正确定义关键帧的from状态。
小结
通过animation-fill-mode属性，我们可以精确控制元素在动画生命周期间之外的表现，避免页面在动画前后出现突兀的变化。掌握backwards与both的用法，就能轻松设置动画未播放时元素的CSS样式。
CSS动画animation-fill-mode元素样式修改时间：2026-07-27 12:09:25