animtaion-clockwise.css - 90도씩 딜레이를 주고 회전하는 애니메이션

animation-clockwise.css

@keyframes clockwise {
  0% { transform: rotate(0); }
  10% { transform: rotate(90deg); }
  25% { transform: rotate(90deg); }

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

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

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

icon.css

icon {
    animation-name: clockwise;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}