keyframe animation

resources

Animation: Keyframes


code:

/* animation styles */
#ring{
  width: 300px;
  height: 300px;  
  
  /*animation-name: ringer;
  animation-duration: 6s;
  animation-timing-function: steps(12);
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: forwards;*/
  animation: ringer steps(12) forwards 6s infinite;

}

@keyframes ringer{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

tutorials: