forwards使动画结束后保留最后一帧样式，backwards在动画开始前（尤其有延迟时）应用第一帧样式，两者分别控制动画尾部和头部的样式填充。
在 CSS 动画中，animation-fill-mode 用于控制动画在执行前后的样式表现。其中 forwards 和 backwards 是两个常用值，它们的作用时机和影响对象不同，容易混淆。下面详细说明两者的区别。
animation-fill-mode: forwards
这个值决定动画结束后，元素是否保留最后一帧的样式。
说明：当动画播放到最后一个关键帧（即 100% 或 to）时，元素的样式会“冻结”在那一帧。 即使动画结束，元素也不会恢复到原始状态（除非被其他样式覆盖）。 适用于希望动画效果“停留”的场景，比如让元素淡出后保持隐藏。
例子：
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; }}.element { animation: fadeOut 2s forwards;}
动画结束后，.element 的 opacity 会保持为 0。
立即学习“前端免费学习笔记（深入）”；
九歌
九歌–人工智能诗歌写作系统
322 查看详情
animation-fill-mode: backwards
这个值影响的是动画开始前的状态，具体是指从何时开始应用动画的第一帧样式。
说明：如果设置了 animation-delay，在延迟期间，浏览器默认不会应用任何动画样式。 加上 backwards 后，在延迟阶段就会应用动画第一帧（即 0% 或 from）的样式。 如果没有设置 delay，则效果通常不明显。
例子：
@keyframes slideIn { from { transform: translateX(-100px); } to { transform: translateX(0); }}.element { animation: slideIn 2s 1s backwards;}
虽然动画 1 秒后才开始，但在这 1 秒的延迟期内，元素已经处于 translateX(-100px) 的位置，而不是原始位置。
对比总结
forwards：关注动画“结束后”的状态，保留最后一帧。 backwards：关注动画“开始前”的状态，提前应用第一帧（尤其在有 delay 时生效）。 两者可以同时使用：animation-fill-mode: both; 表示兼顾前后。
基本上就这些。理解的关键是：forwards 看结尾，backwards 看开头。
以上就是css animation-fill-mode forwards与backwards区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1030488.html
微信扫一扫 
支付宝扫一扫 
