CSS 动画后如何保持样式不变？

要解决这个问题，需要在 html 代码中添加一个初始位置：

<div class="box box-out"   style="max-width:100%"></div>

接下来，在 css 代码中修改动画的结束属性：

.out {
    animation: out 1s;
    animation-fill-mode: forwards;
}

animation-fill-mode: forwards 确保动画在结束时保持结束属性值。

修改后的 css 代码如下：

.box {
    width: 100px;
    height: 100px;
    position: absolute;
}

.box-in {
    background-color: blue;
    opacity: 0;
}

.box-out {
    background-color: red;
    opacity: 1;
}

.out {
    animation: out 1s;
    animation-fill-mode: forwards;
}

.in {
    animation: in 1s;
}

@keyframes out {
    from {
        left: -70px;
    }

    to {
        left: 70px;
        opacity: 0;
    }
}

@keyframes in {
    from {
        left: 70px;
    }

    to {
        left: 0px;
        opacity: 1;
    }
}

现在，动画结束后，div 将保留其 ending position。

理论要掌握，实操不能落！以上关于《CSS 动画后如何保持样式不变？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！