CSS动画如何在动作结束时保持该状态不变
在 CSS 动画中，默认情况下，动画结束后元素会恢复到初始状态。如果希望动画结束后保持最终状态不变，可以使用 animation-fill-mode 属性。
- 使用
animation-fill-mode: forwards
animation-fill-mode: forwards 可以让元素在动画结束后保持最后一帧的状态。
示例：
.box {
width: 100px;
height: 100px;
background-color: red;
animation: move 2s forwards; /* 动画结束后保持最终状态 */
}
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200px);
}
}
- 效果：动画结束后，元素会停留在
translateX(200px)的位置。
animation-fill-mode的其他值
none（默认）：动画结束后，元素恢复到初始状态。backwards：在动画开始前，元素应用第一帧的状态。both：结合forwards和backwards，动画开始前应用第一帧状态，结束后保持最后一帧状态。
示例：
.box {
animation: move 2s both; /* 结合 forwards 和 backwards */
}
- 结合
animation-delay使用
如果动画有延迟（animation-delay），animation-fill-mode: backwards 可以在延迟期间应用第一帧状态。
示例：
.box {
animation: move 2s 1s backwards; /* 延迟 1 秒，期间应用第一帧状态 */
}
@keyframes move {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
- 使用 JavaScript 动态添加类
如果需要更灵活地控制动画状态，可以通过 JavaScript 动态添加类来实现。
示例：
<div class="box"></div>
<button onclick="addClass()">保持状态</button>
.box {
width: 100px;
height: 100px;
background-color: red;
transition: transform 2s;
}
.box.final-state {
transform: translateX(200px);
}
function addClass() {
document.querySelector('.box').classList.add('final-state');
}
- 使用
@keyframes定义最终状态
在 @keyframes 中明确定义最终状态，确保动画结束后元素保持该状态。
示例：
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200px);
}
}
- 注意事项
- 性能优化：使用
animation-fill-mode: forwards时，浏览器会保留动画的最后一帧，可能会增加内存占用。 - 兼容性：
animation-fill-mode在现代浏览器中支持良好，但在旧版本浏览器（如 IE9 及以下）中不支持。 - 结合其他属性：可以结合
animation-iteration-count（动画次数）和animation-direction（动画方向）实现更复杂的效果。
总结
| 方法 | 适用场景 | 注意事项 |
|---|---|---|
animation-fill-mode: forwards | 动画结束后保持最终状态 | 现代浏览器支持良好 |
animation-fill-mode: both | 结合forwards 和 backwards | 适用于有延迟的动画 |
| JavaScript 动态添加类 | 需要灵活控制动画状态时 | 适合复杂交互场景 |
@keyframes 定义最终状态 | 明确动画的最终状态 | 适用于简单动画 |
根据具体需求选择合适的方法，可以让 CSS 动画在动作结束时保持状态不变。
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github
