added animation page

app.py

@@ -44,6 +44,10 @@ def add_item():
         return redirect(url_for('home'))
     return render_template('add_item.html')
 
+@app.route('/motion')
+def motion():
+    return render_template('motion.html')
+
 @app.route('/about')
 def about():
     return render_template('about.html', now=dt.now())

static/css/motion.css

@@ -0,0 +1,103 @@
+.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) */
+}
+
+#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;
+  }
+
+  50% {
+    background-color: yellow;
+  }
+
+  100% {
+    background-color: red;
+  }
+}
+/* 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;
+    }
+}

templates/base.html

@@ -16,6 +16,7 @@
             <a href="{{ url_for('add_item') }}">Add Item</a>
             <a href="{{ url_for('get_weather') }}">Weather</a>
             <a href="{{ url_for('rank') }}">Relative Rank</a>
+            <a href="{{ url_for('motion') }}">Motion Graphics</a>
             <a href="{{ url_for('about') }}">About</a>
         </nav>
     </header>

templates/motion.html

@@ -0,0 +1,11 @@
+{% extends "base.html" %}
+{% block content %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/motion.css') }}">
+<div id="motion" class="motion-test-1"></div>
+<div style="height: 300px;"></div>
+<div id="linear" class="motion-test-2">linear</div>
+<div id="ease" class="motion-test-2">ease</div>
+<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>
+{% endblock %}