css3动画，360翻转

1.文字360不停翻转

<template>
	<p class="header-text logoshow" v-show="menuType === '2'">LOGO</p>
</template>
<style>
.logoshow {
  animation: logoantion 1s linear infinite;
}
@keyframes logoantion {
  0% {
    transform: rotate3d(1, 0, 0, 360deg);
  }
  100% {
    transform: rotate3d(1, 0, 0, 0);
  }
}
</style>

2.文字出来再弹一下，蹩脚的动画

.logoshow2 {
  animation: logoantion2 .5s linear;
}
@keyframes logoantion2 {
  0% {
    transform: translateX(-50%);
  }
  50% {
    transform: translateX(40%);
  }
  70% {
    transform: translateX(20%);
  }
  100% {
    transform: translateX(0%);
  }
}