<div id="app">
  <button @click="soiya=!soiya">ソイヤ</button>
  <p v-if="soiya">ウェ〜〜〜〜〜〜〜イ</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13"></script>
#app{
  display: flex;
  width: 500px;
  margin: 0 auto;
}

button, p{
  width: 45%;
  line-height: 50px;
  margin: 0 2.5%;
}

button{
  background: black;
  color: white;
}

p{
  -webkit-animation:buruburu 0.1s infinite linear alternate;
  animation: buruburu 0.1s infinite linear alternate;
}

@-webkit-keyframes buruburu {
    0% {-webkit-transform:translate(0, 0) rotate(-3deg);}
    50% {-webkit-transform:translate(0, -1px) rotate(0deg);}
    100% {-webkit-transform:translate(0, 0)rotate(3deg);}
}

@keyframes buruburu {
    0% {transform:translate(0, 0) rotate(-3deg);}
    50% {transform:translate(0, -1px) rotate(0deg);}
    100% {transform:translate(0, 0)rotate(3deg);}
}
let vm = new Vue({
  el : '#app',
  data : {
    soiya : false
  },
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.