CSS动画执行完毕后，如何保持最终状态不变？

在网页设计中，CSS 动画是一种强大的工具。能够让页面元素动起来提高视觉效果和使用者体验。按理说，只是一个常见痛点是：动画结束后元素会恢复到初始状态。而不是停留在最终帧，这会导致页面显得不连贯，甚至影响交互体验。

说到痛点一，动画完成后元素自动回退到起始样式

你是否曾经在完成一次滑入、淡入或旋转动画后发现。页面刷新或切换页面时该元素又恢复到了原始位置？这不仅破坏了视觉连续性，还可能让使用者产生误解。

方法一这方面，使用 animation‑fill‑mode 保持最终状态

@keyframes slideIn {
from {
opacity: 0;transform: translateX;}
to {
opacity: 1;transform: translateX;其实，}
}
.my-element {
animation: slideIn 1s ease forwards;/* forwards 保持最终一帧 */
}

关键点：

• .my-element { animation-fill-mode: forwards;}
• `forwards`：让元素在动画结束后继续应用最终一帧的样式。怎么说呢，
• `backwards`：可用于在动画开始前预设起始样式。
• `both`：同时保留前后两帧。
• ⚠️ 注意兼容性：旧版 IE8 以下不支持； 请确认目标浏览器支持，

方法二这方面，用 JavaScript 监听 `animationend` 事件添加持久类名

// 给需要保持最终状态的元素绑定事件
const el = document.querySelector;按理说，el.addEventListener => {
// 动画结束后添加一个自定义类
el.classList.add;})，/* CSS */
.animate-done {
/* 最终需要保持的样式 */
}

This method 的优点是能与多段动画或复杂逻辑配合使用，例如根据不同场景动态切换类名；缺点是需要编写额外脚本，而且对性能有微小影响。如果你正在建立一个大规模项目并想保持代码整洁，请考虑此方案。

方法三这方面，利用 CSS Transition 与 Keyframes 混合实现简易效果

当动画相对简单时可以直接使用 并结合 @keyframes 的最终一帧来保证最终状态：

@keyframes fadeInOut {
from { opacity:0;}
to { opacity:1;}
}
.fade-element {
animation-name: fadeInOut;animation-duration: .5s;}
.fade-element:hover{
transition-property: opacity;transition-duration:.5s;/* Hover 时仍保持透明度为1 */
}

注意事项与常用方法

• `animation-fill-mode` 与 `` 的区别：`fill-mode` 用于关键帧动画，而 `` 更适合单一属性变化。二者可配合使用以覆盖不同需求。
• `prefers-reduced-motion` 使用者设置：If 使用者开启了“减少运动”模式。请确保你的实现能优雅降级，不要强制播放长时间高频率的动画。
• `will-change` 提示浏览器调整：Add `will-change:auto|transform|opacity` 在需要高性能的情况下让浏览器提前调整渲染方法。不过，
• `@supports` 检测能力：E.g.。`@supports ` 来确保特性可用，再做退化处理。
• ⚡ 小技巧：