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

templates/motion.html

@@ -8,4 +8,5 @@
 <div id="ease-in" class="motion-test-2">ease-in</div>
 <div id="ease-out" class="motion-test-2">ease-out</div>
 <div id="ease-in-out" class="motion-test-2">ease-in-out</div>
+<div class="dot"></div>
 {% endblock %}