css 动画如何保持最终的状态

最新推荐文章于 2024-07-11 10:24:06 发布

昌周

最新推荐文章于 2024-07-11 10:24:06 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/qq_45623378/article/details/128368328

版权

css 前端

这个东西我也想了很久我是这样解决的

1 设置的时候css 要设置成最终的样式

2 在动画初始值的时候位置调到最开始的时候，颜色什么的，能改变的都设置成你想要的模式

然后往最后的目标前进，不过这种的话最好使用过度动画，过度动画不止在伪类事件触发，还可以通过创建的形式

列如：通过点击事件动态替换class 实现

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div class="constmain">
    <div>njjjjf</div>
</div>
</body>
<style>
    .constmain {
        height: 1000px;
        width: 1000px;
        border: 2px solid deeppink;
	    display: flex;
		justify-content: flex-end;
    }

    .constmain > div {
        background: #00FFFF;
        height: 600px;
        width: 600px;
        animation-name: gou;
        animation-duration: 4s;
        font-size: 60px;
    }

    @keyframes gou {
        0% {
			width: 0px;
        }
    }
</style>
</html>