css实现持续动画变大变小

CSS可以实现各种各样的动画效果。我们今天来看一下如何利用CSS实现持续动画变大变小。

.anim {
    width: 100px;
    height: 100px;
    background-color: #ff0000;
    animation: scale 2s infinite alternate;
}

@keyframes scale {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.2);
    }
}

以上代码中，我们首先定义了一个宽高都为100px的盒子，并设置了其背景颜色为红色，同时设置了一个名为scale的动画。

在动画scale中，我们将动画效果设置为从原始大小（即1倍）变成1.2倍，同时设置动画持续时间为2秒，并将其无限循环播放。最后设置了一个alternate（交替反向）的选项，使动画在播放每一次的时候都会反向。

这样，我们就完成了CSS实现持续动画变大变小的效果。如果你还想要更多的动画效果，可以继续学习CSS动画的其他属性和方法。