1.实现步骤：

（1）定义动画

（2）执行动画

（1）定义动画

方式一：

@keyframes 动画名{
    form{开始状态}
    to{结束状态}
}

该方式没有中间状态

方式二：

@keyframes 动画名{
    0%{开始状态}
    *%{中间状态}
    100%{结束状态}
}

（2）执行动画

animation： 动画名  执行时间  延迟时间  次数  曲线  执行方向；

次数无数次：infinite

运动曲线匀速：linear

执行方向从form到to,再从to到from：alternate

注意：如果有多个动画执行，用逗号隔开

 示例：

圆的缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            /* 设置圆角 */
            border-radius: 50%;
            background: lightblue;
            /* 执行动画 */
            animation: change 3s infinite linear alternate;
        }
        /* 定义动画 */
        @keyframes change{
            from{
                /* 开始状态不变就不写 */
            }
            to{
                width: 400px;
                height: 400px;
                background: pink;
            }
        }
        
        
    </style>
</head>
<body>
    <div></div>
</body>
</html>