@keyframes [name] {
  [keyframe selector] {CSS styles}
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.ufo {
  animation-duration: 2s;
  animation-name: spin;
}

/*
Part 1: Animation
Here is where we would put our full animation.
*/

.ufo {
  animation: rotation 2s infinite linear;
}

/*
Part 2: Media query
Here is where we would put our partial or no animation.
*/
@media (prefers-reduced-motion: reduce) {
  .ufo {
    animation: none;
  }
}