10.7 动画案例2/* 扩张收缩 */ @keyframes pound { from{ /* 没有动画效果 */

<!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>
        img{
            animation: pound .2s linear 0s infinite alternate;
        }
        /* 扩张 收缩 */
        @keyframes pound {
            from{
                /* 没有动画效果 */
                transform: none;
            }
            to{
                /* scale缩放 <1 缩小 >1 放大 */
                    transform: scale(1.2);
            }
        }
    </style>
</head>
<body>
    <img width="150px" src="https://img0.baidu.com/it/u=3587366479,4195056249&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1686416400&t=b10be76dcb2bfb453d3bb3c2d2c043e5" alt="">
</body>
</html>