Rotating Elements

1. Add an image block

2. Get its #block-ID

3. Add to Custom CSS

• Animation Duration: 1s is very fast, 30s is slow

• Animation Direction: Choose "normal" for clockwise, "reverse" for counterclockwise, and "alternate" to alternate directions

• Animation Iteration: Choose "infinite" to rotate forever, choose a number "n" to rotate n times

• Animation Timing: Choose "linear" to rotate at the same rate throughout, choose "ease-in-out" to slow down at the beginning and end of the rotation

• Animation Delay: Specify the time after page load before animation starts

/* Rotating Elements */
#blockID img {
      animation-duration: 15s;
      animation-direction: normal;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-delay: 0ms;
      animation-name: turn;
      max-width: 100%;
    }

  #blockID:hover img,
  #blockID:focus img {
      /* Play State: "paused" to pause when you hover, "running" to keep on rotating */
      animation-play-state: paused;
    }

  @keyframes turn {
      from {
        transform: rotate(0deg)
      }

      to {
        transform: rotate(360deg)
      }
    }