icon旋转动画效果

icon旋转动画效果

<img :src="item.img" alt="" class="icon-in" :class="[item.name]" />

.icon-in.wind-speed {
  left: 30%;
  top: 30%;
  transform: translate(-50%, -50%);
  animation: windspeed 2.5s linear infinite;
}

@keyframes windspeed {
  0% {
    -webkit-transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(90deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  75% {
    -webkit-transform: rotate(270deg);
  }

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