<!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>
01-26 09:50