动画多状态写法

最新推荐文章于 2025-01-11 08:00:00 发布

weixin_30849591

最新推荐文章于 2025-01-11 08:00:00 发布

阅读量120

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/divtab/p/11588657.html

本文通过一个具体的实例，展示了如何使用CSS动画实现盒子从原始尺寸和颜色逐步变化到另一状态的过程。动画包括宽度、高度及背景颜色的变化，且在动画结束后保持最终状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            /* animation: change  1s  2s; */
            /* forwards 在动画后 后固定*/
            animation: change1 1s linear forwards,
                change2 1s linear 1s forwards,
                change3 1s linear 2s forwards;
        }

        @keyframes change1 {

            /* 宽200 变成 宽400*/
            from {
                width: 200px;
            }

            to {
                width: 400px;
            }
        }

        @keyframes change2 {

            /*高200 变成 高度400 */
            from {
                width: 400px;
                height: 200px;
            }

            to {
                width: 400px;
                height: 400px;
            }
        }

        @keyframes change3 {

            /*背景色红色 变成 绿色*/
            from {
                width: 400px;
                height: 400px;
                background-color: red;
            }

            to {
                width: 400px;
                height: 400px;
                background-color: green;
            }
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

转载于:https://www.cnblogs.com/divtab/p/11588657.html