diff --git a/css/slide21.css b/css/slide21.css
index e69de29..25a1fa6 100644
--- a/css/slide21.css
+++ b/css/slide21.css
@@ -0,0 +1,183 @@
+html{
+ background-color: bisque;
+}
+
+div{
+ width: 100px;
+ height: 100px;
+ background: linear-gradient(135deg, rgb(219, 146, 219), purple);
+ margin: auto;
+}
+
+td{
+ background-color: lightblue;
+ margin: auto;
+ text-align: center;
+}
+
+.animation-name{
+ background-color: pink;
+ vertical-align: middle;
+}
+
+/* Shake */
+.shake:hover{
+ animation: shake 1s;
+ animation-iteration-count: infinite;
+}
+
+@keyframes shake{
+ 0% {transform: translate(1px, 1px) rotate(-1deg);}
+ 25% {transform: translate(-1px, -1px) rotate(1deg);}
+ 50% {transform: translate(1px, 1px) rotate(1deg);}
+ 75% {transform: translate(-1px, -1px) rotate(-1deg);}
+ 100% {transform: translate(1px, 1px) rotate(0deg);}
+}
+
+/* Fade */
+.fade:hover{
+ animation: fade 3s;
+ animation-iteration-count: 1;
+ animation-fill-mode: forwards;
+}
+
+@keyframes fade{
+ from{
+ opacity: 1;
+ }
+ to{
+ opacity: 0;
+ }
+}
+
+/* Jelly */
+.jelly:hover{
+ animation: jelly 3s;
+ animation-iteration-count: infinite;
+}
+
+@keyframes jelly{
+ 0% {transform: skewX(-25deg) skewY(25deg)}
+ 25% {transform: skewX(0deg) skewY(0deg)}
+ 50% {transform: skewX(25deg) skewY(-25deg)}
+ 75% {transform: skewX(50deg) skewY(25deg)}
+ 100% {transform: skewX(25deg) skewY(0deg)}
+}
+
+/* Bounce */
+.bounce:hover{
+ animation: bounce 5s;
+ animation-iteration-count: infinite;
+}
+
+@keyframes bounce{
+ 0% {transform: translateY(0px)}
+ 25% {transform: translateY(-25px)}
+ 50% {transform: translateY(0px)}
+ 75% {transform: translateY(-25px)}
+ 100% {transform: translateY(0px)}
+}
+
+/* Tada */
+.tada:hover{
+ animation: tada 1s;
+ animation-iteration-count: infinite;
+}
+
+@keyframes tada{
+ 0% {transform: rotate(15deg);}
+ 25% {transform: rotate(-15deg);}
+ 50% {transform: scale(1.5) rotate(15deg);}
+ 75% {transform: scale(1.5) rotate(-15deg);}
+ 100% {transform: scale(1.5) rotate(15deg);}
+}
+
+/* Groove */
+.groove:hover{
+ animation: groove 3s;
+ animation-iteration-count: infinite;
+}
+
+@keyframes groove{
+ 0% {transform: translateX(0px)}
+ 50% {transform: translateX(500px)}
+ 100% {transform: translateY(0px)}
+}
+
+/* Swing */
+.swing:hover{
+ animation: swing 10s;
+ animation-iteration-count: infinite;
+}
+
+@keyframes swing{
+ 0% {transform: rotate(90deg)}
+ 50% {transform: rotate(-45deg)}
+ 100% {transform: rotate(90deg)}
+}
+
+/* Squeeze */
+.squeeze:hover{
+ animation: squeeze 1s;
+ animation-iteration-count: 1;
+ animation-fill-mode: forwards;
+}
+
+@keyframes squeeze{
+ 0% {transform: scale(1)}
+ 100% {transform: scale(.1)}
+}
+
+/* Flicker */
+.flick:hover{
+ animation: flick .25s;
+ animation-iteration-count: infinite;
+}
+
+@keyframes flick{
+ from{
+ opacity: 1;
+ }
+ to{
+ opacity: 0;
+ }
+}
+
+/* Jerk */
+.jerk:hover{
+ animation: jerk .5s;
+ animation-iteration-count: 1;
+ animation-fill-mode: forwards;
+}
+
+@keyframes jerk{
+ 0% {transform: translateX(0px)}
+ 50% {transform: translateX(100px)}
+ 100% {transform: translateX(100px)}
+}
+
+/* Blink */
+.blink:hover{
+ animation: blink 1s;
+ animation-iteration-count: 1;
+}
+
+@keyframes blink{
+ 0% {opacity: 1}
+ 50% {opacity: 0}
+ 100% {opacity: 1}
+}
+
+/* Pop */
+.pop:hover{
+ animation: pop 1s ease-in-out infinite alternate;
+}
+
+@keyframes pop{
+ from{
+ box-shadow: 5px 10px yellow;
+ }
+ to{
+ box-shadow: 5px 10px blue;
+ }
+}
\ No newline at end of file
diff --git a/css/slide22.css b/css/slide22.css
index e69de29..1b97f49 100644
--- a/css/slide22.css
+++ b/css/slide22.css
@@ -0,0 +1,47 @@
+html{
+ width: 100%;
+ height: 100%;
+ background-color: green;
+}
+
+.yellow-box{
+ background-color: yellow;
+ width: 250px;
+ height: 250px;
+ animation: swing 2s;
+ animation-iteration-count: infinite;
+ animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0);
+ animation-direction: alternate;
+ position: absolute;
+}
+
+@keyframes swing{
+ from{
+ left: 0px;
+ }
+ to{
+ left: 400px;
+ }
+ 0%{
+ transform: translateX(0px);
+ }
+ 50%{
+ transform: scale(.1);
+ }
+ 100%{
+ transform: scale(1);
+ }
+
+
+
+
+ /* 50%{
+ transform: scale(.1) translateX(0px);
+ }
+ 75%{
+ transform: scale(.1) translateX(200px);
+ }
+ 100%{
+ transform: scale(1) translateX(400px);
+ } */
+}
\ No newline at end of file
diff --git a/css/slide23.css b/css/slide23.css
index e69de29..fd99053 100644
--- a/css/slide23.css
+++ b/css/slide23.css
@@ -0,0 +1,42 @@
+html{
+ width: 100%;
+ height: 100%;
+ background: yellow;
+}
+
+#purple-box{
+ height: 500px;
+ width: 500px;
+ border: purple 11px solid;
+ background: white;
+ position: absolute;
+ top: 100px;
+ left: 100px;
+}
+
+#blue-box{
+ height: 100px;
+ width: 100px;
+ background: blue;
+ position: absolute;
+ top: 50px;
+ left: 50px;
+ animation: blue-box-path 5s;
+ animation-iteration-count: infinite;
+ transition-timing-function: linear;
+}
+
+#container{
+ background: yellowgreen;
+ position: static;
+ height: 1000px;
+ width: 1000px;
+}
+
+@keyframes blue-box-path{
+ 0%{}
+ 25%{transform: translateX(500px)}
+ 50%{transform: translateY(500px) translateX(500px)}
+ 75%{transform: translateX(0px) translateY(500px)}
+ 100%{transform: translateY(0px) translateX(0px)}
+}
\ No newline at end of file
diff --git a/css/slide24.css b/css/slide24.css
index e69de29..2563e5a 100644
--- a/css/slide24.css
+++ b/css/slide24.css
@@ -0,0 +1,44 @@
+html{
+ width: 100%;
+ height: 100%;
+ background: yellow;
+}
+
+#purple-box{
+ height: 500px;
+ width: 500px;
+ border: purple 11px solid;
+ background: white;
+ position: absolute;
+ top: 100px;
+ left: 100px;
+}
+
+#blue-box{
+ height: 100px;
+ width: 100px;
+ background: blue;
+ position: absolute;
+ top: 50px;
+ left: 50px;
+ animation: blue-box-path 5s;
+ animation-iteration-count: infinite;
+ transition-timing-function: linear;
+}
+
+#container{
+ background: yellowgreen;
+ position: static;
+ height: 1000px;
+ width: 1000px;
+}
+
+@keyframes blue-box-path{
+ 0%{}
+ 15%{transform: translateX(500px)}
+ 30%{transform: translateX(0px)}
+ 45%{transform: translateY(500px)}
+ 60%{transform: translateY(500px) translateX(500px)}
+ 75%{transform: translateX(0px) translateY(500px)}
+ 100%{transform: translateY(0px) translateX(0px)}
+}
\ No newline at end of file
diff --git a/sldie21.html b/sldie21.html
index 84a1006..6616e02 100644
--- a/sldie21.html
+++ b/sldie21.html
@@ -1,55 +1,68 @@
-
-
+
-
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- The quickest of brown foxes
-
-
-
-
-
-
-
-
-
-
+ Slide 21
+
+
+
+
+
+
+ |
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
-
-
-
\ No newline at end of file
diff --git a/slide22.html b/slide22.html
index 983bec0..6529b2f 100644
--- a/slide22.html
+++ b/slide22.html
@@ -1,55 +1,18 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- The quickest of brown foxes
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/slide23.html b/slide23.html
index ff7a95e..a6df27a 100644
--- a/slide23.html
+++ b/slide23.html
@@ -1,55 +1,32 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ Slide 23
+
+
+
+
+
-
-
-
-
- The quickest of brown foxes
+
-
-
-
-
-
-
-
-
+
\ No newline at end of file
diff --git a/slide24.html b/slide24.html
index b1b0ef8..5417839 100644
--- a/slide24.html
+++ b/slide24.html
@@ -1,55 +1,32 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ Slide 24
+
+
+
+
+
-
-
-
-
- The quickest of brown foxes
+
-
-
-
-
-
-
-
-
+
\ No newline at end of file