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`：同时保留前后两帧。