<template>
  <div>
    <i :class="{'rotate360':showAnimate}" @animationend="reset"
       class="icon-iconfontshuaxin"></i>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showAnimate: false
    }
  },
  mounted() {
    this.play()
  },
  methods: {
    play() {
      this.showAnimate = true
    },
    reset() {
      this.showAnimate = false
    }
  }
}
</script>
<style scoped>
.rotate360 {
  animation: rotate360 7s linear 0.2s infinite;
}

@keyframes rotate360 {

  100% {
    transform: rotate(360deg);
  }
}

.icon-iconfontshuaxin {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px dashed #ff0000;
  display: block;
  font-size: 30px;
  opacity: .6;
}
</style>