diff --git a/css/slide21.css b/css/slide21.css
index e69de29..405c14e 100644
--- a/css/slide21.css
+++ b/css/slide21.css
@@ -0,0 +1,447 @@
+.shake {
+    text-align: center;
+    height: 150px;
+    width: 150px;
+    margin-left: 20px;
+    background-image: linear-gradient(blue, purple);
+    display: inline-block;
+    padding: 20px;
+    box-shadow: 10px 20px 10px rgb(92, 0, 128);
+    border-radius: 5%;
+    animation-name: shake;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    transform: translate3d(0, 0, 0);
+
+}
+
+.fade {
+    text-align: center;
+    height: 150px;
+    width: 150px;
+    background-image: linear-gradient(blue, purple);
+    display: inline-block;
+    margin-left: 20px;
+    padding: 20px;
+    box-shadow: 10px 20px 10px rgb(92, 0, 128);
+    border-radius: 5%;
+    animation-name: fade;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+}
+
+.jelly {
+    text-align: center;
+    margin-left: 20px;
+    height: 150px;
+    width: 150px;
+    background-image: linear-gradient(blue, purple);
+    display: inline-block;
+    padding: 20px;
+    box-shadow: 10px 20px 10px rgb(92, 0, 128);
+    border-radius: 5%;
+    animation-name: jelly;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    transform-origin: center;
+}
+
+.bounce {
+    text-align: center;
+    margin-left: 20px;
+    height: 150px;
+    width: 150px;
+    background-image: linear-gradient(blue, purple);
+    display: inline-block;
+    padding: 20px;
+    box-shadow: 10px 20px 10px rgb(92, 0, 128);
+    border-radius: 5%;
+    animation: bounce 2s infinite;
+    transform: translateY(0);
+}
+
+.tada {
+    text-align: center;
+    margin-left: 20px;
+    height: 150px;
+    width: 150px;
+    background-image: linear-gradient(blue, purple);
+    display: inline-block;
+    padding: 20px;
+    box-shadow: 10px 20px 10px rgb(92, 0, 128);
+    border-radius: 5%;
+    animation: tada 2s infinite;
+}
+
+.groove {
+    text-align: center;
+    margin-left: 20px;
+    margin-top: 20px;
+    height: 150px;
+    width: 150px;
+    background-image: linear-gradient(blue, purple);
+    display: inline-block;
+    padding: 20px;
+    box-shadow: 10px 20px 10px rgb(92, 0, 128);
+    border-radius: 5%;
+    animation: groove 2s infinite;
+}
+
+.swing {
+    text-align: center;
+    margin-left: 20px;
+    margin-top: 20px;
+    height: 150px;
+    width: 150px;
+    position: relative;
+    background-image: linear-gradient(blue, purple);
+    display: inline-block;
+    padding: 20px;
+    box-shadow: 10px 20px 10px rgb(92, 0, 128);
+    border-radius: 5%;
+    animation: swing ease-in-out 1s infinite alternate;
+    transform-origin: center -30px;
+    float: left;
+}
+
+.squeeze {
+    text-align: center;
+    margin-left: 20px;
+    margin-top: 20px;
+    height: 150px;
+    width: 150px;
+    position: relative;
+    background-image: linear-gradient(blue, purple);
+    display: inline-block;
+    padding: 20px;
+    box-shadow: 10px 20px 10px rgb(92, 0, 128);
+    border-radius: 5%;
+    animation: squeeze 2s infinite;
+}
+
+.flicker {
+    text-align: center;
+    margin-left: 20px;
+    margin-top: 20px;
+    height: 150px;
+    width: 150px;
+    position: relative;
+    background-image: linear-gradient(blue, purple);
+    display: inline-block;
+    padding: 20px;
+    box-shadow: 10px 20px 10px rgb(92, 0, 128);
+    border-radius: 5%;
+    animation: flicker 0.5s infinite;
+}
+
+.jerk {
+    text-align: center;
+    margin-left: 20px;
+    margin-top: 20px;
+    height: 150px;
+    width: 150px;
+    position: relative;
+    background-image: linear-gradient(blue, purple);
+    display: inline-block;
+    padding: 20px;
+    box-shadow: 10px 20px 10px rgb(92, 0, 128);
+    border-radius: 5%;
+    animation: jerk 1s linear infinite;
+    transform: translate3d(0, 0, 0);
+}
+
+.blink {
+    text-align: center;
+    margin-left: 20px;
+    margin-top: 20px;
+    height: 150px;
+    width: 150px;
+    position: relative;
+    background-image: linear-gradient(blue, purple);
+    display: inline-block;
+    padding: 20px;
+    box-shadow: 10px 20px 10px rgb(92, 0, 128);
+    border-radius: 5%;
+    animation: blink 1s infinite;
+}
+
+.pop {
+    text-align: center;
+    margin-left: 20px;
+    margin-top: 20px;
+    height: 150px;
+    width: 150px;
+    position: relative;
+    background-image: linear-gradient(blue, purple);
+    display: inline-block;
+    padding: 20px;
+    box-shadow: 10px 20px 10px rgb(92, 0, 128);
+    border-radius: 5%;
+    animation: pop 1s infinite;
+}
+
+
+@keyframes shake {
+
+    10%,
+    90% {
+        transform: translate3d(-1px, 0, 0);
+    }
+
+    20%,
+    80% {
+        transform: translate3d(2px, 0, 0);
+    }
+
+    30%,
+    50%,
+    70% {
+        transform: translate3d(-4px, 0, 0);
+    }
+
+    40%,
+    60% {
+        transform: translate3d(4px, 0, 0);
+    }
+
+}
+
+@keyframes fade {
+
+    0% {
+        opacity: 1;
+    }
+
+    25% {
+        opacity: 0.75;
+    }
+
+    50% {
+        opacity: 0.5;
+    }
+
+    75% {
+        opacity: 0.25;
+    }
+
+    100% {
+        opacity: 0;
+    }
+
+}
+
+@keyframes jelly {
+    11.1% {
+        transform: none;
+    }
+
+    22.2% {
+        transform: skewX(-12.5deg) skewY(-12.5deg)
+    }
+
+    33.3% {
+        transform: skewX(6.25deg) skewY(6.25deg);
+    }
+
+    44.4% {
+        transform: skewX(-3.125deg) skewY(-3.125deg);
+    }
+
+    55.5% {
+        transform: skewX(1.5625deg) skewY(1.5625deg);
+    }
+
+    66.6% {
+        transform: skewX(-0.78125deg) skewY(-0.78125deg);
+    }
+
+    77.7% {
+        transform: skewX(0.390625deg) skewY(0.390625);
+    }
+
+    88.8% {
+        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+    }
+
+    100% {
+        transform: none;
+    }
+}
+
+@keyframes bounce {
+
+    0%,
+    20%,
+    50%,
+    80%,
+    100% {
+        transform: translateY(0);
+    }
+
+    40% {
+        transform: translateY(-30%);
+    }
+
+    60% {
+        transform: translateY(-15%);
+    }
+}
+
+@keyframes tada {
+    0% {
+        transform: scale3d(1, 1, 1);
+    }
+
+    10%,
+    20% {
+        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+    }
+
+    30%,
+    50%,
+    70%,
+    90% {
+        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+    }
+
+    40%,
+    60%,
+    80% {
+        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+    }
+
+    100% {
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+@keyframes groove {
+    from {
+        border-style: none;
+    }
+
+    to {
+        border-style: groove;
+    }
+}
+
+@keyframes swing {
+    0% {
+        transform: rotate(4deg)
+    }
+
+    100% {
+        transform: rotate(-4deg)
+    }
+}
+
+@keyframes squeeze {
+    from {
+        transform: none;
+    }
+
+    to {
+        transform: scale3d(-1, -1, 0);
+    }
+}
+
+@keyframes flicker {
+    0% {
+        opacity: 0.4;
+    }
+
+    5% {
+        opacity: 0.5;
+    }
+
+    10% {
+        opacity: 0.6;
+    }
+
+    15% {
+        opacity: 0.85;
+    }
+
+    25% {
+        opacity: 0.5;
+    }
+
+    30% {
+        opacity: 1;
+    }
+
+    35% {
+        opacity: 0.1;
+    }
+
+    40% {
+        opacity: 0.25;
+    }
+
+    45% {
+        opacity: 0.5;
+    }
+
+    60% {
+        opacity: 1;
+    }
+
+    70% {
+        opacity: 0.85;
+    }
+
+    80% {
+        opacity: 0.4;
+    }
+
+    90% {
+        opacity: 0.5;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes jerk {
+
+    2%,
+    64% {
+        transform: translate(-2px, 0);
+    }
+
+    4%,
+    60% {
+        transform: translate(-2px, 0);
+    }
+
+    64% {
+        transform: translate(-22px, 5px) skew(21deg)
+    }
+}
+
+@keyframes blink {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.5;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes pop {
+    0% {
+        opacity: 1;
+        transform: scale(1);
+    }
+
+    100% {
+        opacity: 0;
+        transform: scale(0.5);
+    }
+}
\ No newline at end of file
diff --git a/css/slide22.css b/css/slide22.css
index e69de29..192b65f 100644
--- a/css/slide22.css
+++ b/css/slide22.css
@@ -0,0 +1,97 @@
+.swing {
+    height: 100px;
+    width: 100px;
+    background-image: linear-gradient(yellow, lightgreen);
+    display: inline-block;
+    left: 600px;
+    margin-top: 20%;
+    padding: 20px;
+    box-shadow: 10px 20px 10px rgb(92, 0, 128);
+    border-radius: 5%;
+    animation-name: swing;
+    animation-duration: 4s;
+    animation-iteration-count: infinite;
+    transition-timing-function: ease-in;
+    transform: translate3d(0, 0, 0);
+    position: relative
+}
+
+@keyframes swing {
+
+    0%,
+    50%,
+    100% {
+        left: 600px;
+        height: 100px;
+        width: 100px;
+    }
+
+    5%,
+    45% {
+        left: 650px;
+        height: 120px;
+        width: 120px;
+    }
+
+    10%,
+    40% {
+        left: 700px;
+        height: 140px;
+        width: 140px;
+    }
+
+    15%,
+    35% {
+        left: 750px;
+        height: 160px;
+        width: 160px;
+    }
+
+    20%,
+    30% {
+        left: 800px;
+        height: 180px;
+        width: 180px;
+    }
+
+    25% {
+        left: 850px;
+        height: 200px;
+        width: 200px;
+    }
+
+    55%,
+    95% {
+        left: 550px;
+        height: 120px;
+        width: 120px;
+    }
+
+    60%,
+    90% {
+        left: 500px;
+        height: 140px;
+        width: 140px;
+    }
+
+    65%,
+    85% {
+        left: 450px;
+        height: 160px;
+        width: 160px;
+    }
+
+    70%,
+    80% {
+        left: 400px;
+        height: 180px;
+        width: 180px;
+    }
+
+    75% {
+        left: 350px;
+        height: 200px;
+        width: 200px;
+    }
+
+}
\ No newline at end of file
diff --git a/css/slide23.css b/css/slide23.css
index e69de29..507aeea 100644
--- a/css/slide23.css
+++ b/css/slide23.css
@@ -0,0 +1,50 @@
+.outerbox {
+    height: 400px;
+    width: 400px;
+    border: 5px solid purple;
+    position: absolute;
+    display: inline-block;
+    top: 100px;
+    left: 400px;
+}
+
+.innerbox {
+    height: 100px;
+    width: 100px;
+    background-color: lightskyblue;
+    position: relative;
+    top: 50px;
+    left: 500px;
+    /* animation-iteration-count: infinite; */
+    animation-name: loop;
+    animation-duration: 6s;
+    transform: translate3d(0, 0, 0);
+}
+
+@keyframes loop {
+
+    0%,
+    100% {
+        /* top left */
+        left: 350px;
+        top: 50px;
+    }
+
+    25% {
+        /* top right */
+        left: 750px;
+        top: 50px;
+    }
+
+    50% {
+        /* bottom right */
+        left: 750px;
+        top: 450px;
+    }
+
+    75% {
+        /* bottom left */
+        left: 350px;
+        top: 450px;
+    }
+}
\ No newline at end of file
diff --git a/css/slide24.css b/css/slide24.css
index e69de29..292436e 100644
--- a/css/slide24.css
+++ b/css/slide24.css
@@ -0,0 +1,51 @@
+.outerbox {
+    height: 400px;
+    width: 400px;
+    border: 5px solid purple;
+    position: absolute;
+    display: inline-block;
+    top: 100px;
+    left: 400px;
+}
+
+.innerbox {
+    height: 100px;
+    width: 100px;
+    background-color: lightskyblue;
+    position: relative;
+    top: 50px;
+    left: 500px;
+    animation-name: loop;
+    animation-delay: 1s;
+    animation-duration: 6s;
+    animation-iteration-count: infinite;
+    transform: translate3d(0, 0, 0);
+}
+
+@keyframes loop {
+
+    0%,
+    100% {
+        /* top left */
+        left: 350px;
+        top: 50px;
+    }
+
+    25% {
+        /* top right */
+        left: 750px;
+        top: 50px;
+    }
+
+    50% {
+        /* bottom left */
+        left: 350px;
+        top: 450px;
+    }
+
+    75% {
+        /* bottom right */
+        left: 750px;
+        top: 450px;
+    }
+}
\ No newline at end of file
diff --git a/sldie21.html b/sldie21.html
index 84a1006..17a92dd 100644
--- a/sldie21.html
+++ b/sldie21.html
@@ -4,7 +4,9 @@
 <!-- ----------------------------------------------------------------- -->
 <!-- ----------------------------------------------------------------- -->
 <!-- ----------------------------------------------------------------- -->
-<head> <!-- header begins here -->
+
+<head>
+  <!-- header begins here -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="">
@@ -32,8 +34,48 @@
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
-<body> <!-- body begins here -->
-  The quickest of brown foxes
+
+<body>
+  <!-- body begins here -->
+
+  <div class="shake">
+    Shake
+  </div>
+  <div class="fade">
+    Fade
+  </div>
+  <div class="jelly">
+    Jelly
+  </div>
+  <div class="bounce">
+    Bounce
+  </div>
+  <div class="tada">
+    Tada
+  </div>
+  <div class="groove">
+    Groove
+  </div>
+  <div class="swing">
+    Swing
+  </div>
+  <div class="squeeze">
+    Squeeze
+  </div>
+  <div class="flicker">
+    Flicker
+  </div>
+  <div class="jerk">
+    Jerk
+  </div>
+  <div class="blink">
+    Blink
+  </div>
+  <div class="pop">
+    Pop
+  </div>
+
+
 
 
 
diff --git a/slide22.html b/slide22.html
index 983bec0..72e8977 100644
--- a/slide22.html
+++ b/slide22.html
@@ -4,7 +4,9 @@
 <!-- ----------------------------------------------------------------- -->
 <!-- ----------------------------------------------------------------- -->
 <!-- ----------------------------------------------------------------- -->
-<head> <!-- header begins here -->
+
+<head>
+  <!-- header begins here -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="">
@@ -32,9 +34,13 @@
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
-<body> <!-- body begins here -->
-  The quickest of brown foxes
 
+<body>
+  <!-- body begins here -->
+
+  <div class="swing">
+
+  </div>
 
 
 
diff --git a/slide23.html b/slide23.html
index ff7a95e..ac093bb 100644
--- a/slide23.html
+++ b/slide23.html
@@ -4,7 +4,9 @@
 <!-- ----------------------------------------------------------------- -->
 <!-- ----------------------------------------------------------------- -->
 <!-- ----------------------------------------------------------------- -->
-<head> <!-- header begins here -->
+
+<head>
+  <!-- header begins here -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="">
@@ -32,9 +34,16 @@
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
-<body> <!-- body begins here -->
-  The quickest of brown foxes
 
+<body>
+  <!-- body begins here -->
+
+  <div class="outerbox">
+
+  </div>
+  <div class="innerbox">
+
+  </div>
 
 
 
diff --git a/slide24.html b/slide24.html
index b1b0ef8..bf5e409 100644
--- a/slide24.html
+++ b/slide24.html
@@ -4,7 +4,9 @@
 <!-- ----------------------------------------------------------------- -->
 <!-- ----------------------------------------------------------------- -->
 <!-- ----------------------------------------------------------------- -->
-<head> <!-- header begins here -->
+
+<head>
+  <!-- header begins here -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="">
@@ -32,8 +34,15 @@
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
-<body> <!-- body begins here -->
-  The quickest of brown foxes
+
+<body>
+  <!-- body begins here -->
+  <div class="outerbox">
+
+  </div>
+  <div class="innerbox">
+
+  </div>