.motion-test-1 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: color-move;
  animation-duration: 4s;
  animation-iteration-count: infinite; /* can be left off to run once, specify a number as desired or inifinite */
  animation-direction: alternate; /* can be left off for forward, reverse, alternate (forward then reverse), alternate-reverse (reverse then forward) */
}

.motion-test-2 {
  width: 100px;
  height: 50px;
  background-color: red;
  position: relative;
  animation: from-to 5s; /* combines multiple animation options together for shorthand (name, duration, timing, delay, interations, direction)*/
  animation-iteration-count: infinite; /* can be left off to run once, specify a number as desired or inifinite */
  animation-direction: alternate; /* can be left off for forward, reverse, alternate (forward then reverse), alternate-reverse (reverse then forward) */
}

.dot {
  height: 3em;
  width: 3em;
  background-color: #bbb;
  border-radius: 50%; /*this makes the circle*/
  border: 3px solid blue;
  display: inline-block;
  position: relative;
  animation: 3s ease-in infinite percent ;
}


#linear {
  animation-timing-function: linear;
}

#ease {
  animation-timing-function: ease;
}

#ease-in {
  animation-timing-function: ease-in;
}

#ease-out {
  animation-timing-function: ease-out;
}

#ease-in-out  {
  animation-timing-function: ease-in-out;
}

/* from-to pattern where from is 0% and to is 100% can only have these two options */
@keyframes from-to {
  from {
    left: 0px;
  }

  to {
    left: 300px;
  }
}

/* % pattern where each line denotes the starting percent of the style */
@keyframes percent {
  0% {
    background-color: red;
    border: .25em solid green;
  }

  50% {
    background-color: yellow;
    border: .75em solid blue;
  }

  100% {
    background-color: red;
    border: .25em solid green;
  }
}
/* uses pixel postions from 0,0 being top-left corner to move the element around
NEEDS: "position: relative;" on element to work
*/
@keyframes color-move {
  0% {
      background-color: red;
      left: 0px;
      top: 0px;
    }
  
    25% {
      background-color: yellow;
      left: 200px;
      top: 0px;
      transform: scale(1.5);
    }
  
    50% {
      background-color: blue;
      left: 200px;
      top: 200px;
      transform: scale(2);
    }
  
    75% {
      background-color: green;
      left: 0px;
      top: 200px;
      transform: scale(1.5);
    }
  
    100% {
      background-color: red;
      left: 0px;
      top: 0px;
    }
}