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

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《CSS 动画后如何保持样式不变？》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

css 中如何保持动画后的样式

想要保持动画后的样式，需要修改 html 和 css 代码。

在提供的 html 代码中，存在如下问题：

<div class="box box-out"></div>

这个 <div> 没有设置初始位置，因此它不会保留动画后的位置。

要解决这个问题，需要在 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学习网公众号吧！