CSS 點擊img 或者 div 增加抖動(shake)效果

一般使用場景: 登錄的錯誤驗證 或者 強提醒

template 部分

<img id="barcode" :class="{ shaking: toShake}" @click="handleShake" />

javascript 部分

export default {
  data(){
    return{
      toShake: false
    }  
  },
methods:{
handleShake() {
      this.toShake= true
      // demo for next animation.
      setTimeout(() => {
        this.toShake= false
      }, 1000)
    }
  }
}

css 部分

.shaking {
  animation: shakeX 1s;
}
@keyframes shakeX {
  from,
  to {
    transform: translate3d(0, 0, 0);
  }
// 進度為10%,30%,50%,70%,90% 動畫
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate3d(-0.5rem, 0, 0);
  }
// 進度為10%,30%,50%,70%,90% 動畫
  20%,
  40%,
  60%,
  80% {
    transform: translate3d(0.5rem, 0, 0);
  }
}