动画震动效果

项目场景：

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

在有的相关目中特别是在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的效果）。

---

解决方案：

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

<template>
  <div 
    class="wmax500 flexBe borderBG padTB25 padLR15 h100B cardBox">
    <div class="marginB20 iconBox marginR25">
      <i 
        :class="props.icon" 
        class="iconfont fontS30 fontW4 colorGreen hoverS "></i>
    </div>
    <div class="">
      <div 
        class="hoverS hoverGreen fontS18 fontW7 marginB25">
        <span>{{props.title}}</span>
      </div>
      <div class="lineH30 fontS14"><span>{{props.text}}</span></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  reactive,
  toRefs,
  ref,
  Ref,
  PropType,
  onMounted,
  onBeforeUnmount,
} from "vue"
const props=defineProps({
  title:{
    type:String,
  },
  text:{
    type:String,
  },
  icon:{
    type:String,
  }
})
onMounted(()=>{
  console.log()
})
onBeforeUnmount(()=>{
  console.log()
})

</script>

<style lang="less" scoped>

.borderBG{
  border: 1px solid #eeeeee;
  background-color: #fafafa;
  border-radius: 4px;
}
.iconBox{
  color:#00ac1f ;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 50%;
  border: 1px solid #00ac1f;
  text-align: center;
}
.wmax500{
  max-width: 400px;
  min-width: 300px;
}
// =============================================核心
// 父（外层.cardBox）hover 的时候 子（.iconBox）的变化
.cardBox:hover .iconBox{
  animation: shake 0.5s;
}
@keyframes shake {
  0% {
    /* 初始状态 */
    transform: scale(0.8);
    opacity: 0;
  }
  25%{
    /* 进行中的状态 */
    transform: scale(1.1);
    opacity: 0.8;
  }
  50% {
    /* 进行中的状态 */
    transform: scale(0.8);
    opacity: 1;
  }
  75% {
    /* 进行中的状态 */
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    /* 结束状态 */
    transform: scale(1);
    opacity: 1;
  }
}
</style>