CSS中心回転アニメーション

#img_heard {
  background-image: url(../assets/y.jpg);
  width: 50px;
  height: 50px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50px;
  vertical-align: middle;
}
#img_heard:hover {
  -webkit-animation: haha1 2s linear infinite;
}


@-webkit-keyframes haha1 {
  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);
  }
}