动画震动效果

项目场景：

提示：这里简述项目相关背景：

在有的相关目中特别是在C端一般都要求做的炫酷一些，这就需要一些简易的动画效果，这里就弄了一个简易的震动的效果如下视频所示

让图标一大一小的震动视频

 

---

分析：

提示：这里填写问题的分析：

首先需要准备的东西，就是了解动画animation属性

.element {

        animation: animationName duration timing-function delay iteration-count direction;

}

动画的属性

animation-name	此属性用于指定要绑定到选择器的关键帧的名称。
animation-duration	它定义了动画完成一个完整周期所需的时间长度，该时间长度可以设置为秒（s）或毫秒（ms）。值得注意的是，该属性必须明确指定，因为其默认值为0，若设置为0，则动画将不会开始播放。
animation-timing-function	此属性用于指定动画在完成一个周期时的时间曲线，例如选择线性或缓动等方式。它决定了动画在整个周期内的速度变化情况。
animation-delay	该属性用于设定动画开始前的延迟时间，同样支持秒（s）或毫秒（ms）为单位。通过此属性，我们可以灵活地控制动画的起始时间。
animation-iteration-count	此属性用于设定动画的循环播放次数。用户可以指定一个具体的数字，或者使用infinite关键字来让动画无限循环播放。
animation-direction	这个属性决定了动画在每次循环时是否应该反向播放。其可选值包括normal（正常播放，即从起始状态到结束状态）、reverse（反向播放，即从结束状态到起始状态）、alternate（正常播放后反向播放，即交替进行）以及alternate-reverse（反向播放后正常播放，也即交替进行，但顺序相反）。
animation-fill-mode	此属性用于定义动画在开始前和结束后的状态，例如元素是可见还是隐藏。其可选值包括none（动画执行完毕后，元素回到原始位置，这是默认设置）、forwards（动画结束后，元素会停留在结束时的位置）、backwards（在动画开始前的延时阶段，元素会预先置于动画的起始位置）以及both（结合了forwards和backwards的效果）。

---

解决方案：

提示：这里填写该问题的具体解决方案：