Finished Exercises for Day 3

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;
+    }
+}

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);
+    } */
+}

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)}
+}

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)}
+}