css动画小圆圈

CSS动画可以帮助我们实现各种各样的效果，比如让一个DIV晃动。接下来，我们就来介绍如何使用CSS动画实现DIV晃动的效果。

div {
    position: relative;
    animation: shake 0.5s infinite alternate;
}

@keyframes shake {
    from {
        left: -10px;
    }
    to {
        left: 10px;
    }
}

首先，我们需要将需要晃动的DIV设置为相对定位。然后，我们使用animation属性来定义动画。其中，shake是动画名称，0.5s是动画时长，infinite表示动画无限循环，alternate表示动画来回播放。

接下来，我们使用@keyframes规则来定义动画的具体效果。我们使用from和to来定义动画的起始和结束状态，left属性可以使DIV在水平方向进行晃动。在这里，我们将DIV的left值从-10px到10px进行改变，就能实现晃动的效果。

这样，我们就使用CSS动画成功实现了DIV的晃动效果。如果想要让DIV在垂直方向进行晃动，只需要将left属性改为top即可。除此之外，我们还可以通过改变数字或属性值，来实现不同的动画效果。