diff --git a/static/css/motion.css b/static/css/motion.css
index fabff2b..6e2cbd2 100644
--- a/static/css/motion.css
+++ b/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;
     }
-}
\ No newline at end of file
+}
diff --git a/templates/motion.html b/templates/motion.html
index 820449f..c55e14f 100644
--- a/templates/motion.html
+++ b/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 %}
\ No newline at end of file