added animation page

2025-02-08 16:20:44 -06:00
parent 9bd95c8ccd
commit 2b21b7f5e7
5 changed files with 119 additions and 0 deletions
--- a/static/css/motion.css
+++ b/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;
+    }
+}