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

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

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

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

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

这个

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

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

<div class="box box-out" style="left: -70px;"></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 动画后如何保持样式不变？的详细内容，更多请关注其它相关文章！