learned about circles

static/css/motion.css

@@ -19,6 +19,18 @@
   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;
 }
@@ -54,14 +66,17 @@
 @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
@@ -100,4 +115,4 @@ NEEDS: "position: relative;" on element to work
       left: 0px;
       top: 0px;
     }
-}
+}