Finished all the assignments

css/slide21.css

@@ -0,0 +1,212 @@
+.box1{
+    width: 100px;
+    height: 100px;
+    background-color: aqua;
+
+}
+
+.box1:hover{
+    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
+    /* When the animation is finished, start again */
+  animation-iteration-count: infinite;
+  transform: translate3d(0, 0, 0);
+
+
+
+
+
+}
+@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);
+    }
+  }
+
+
+  .box2{
+    width: 100px;
+    height: 100px;
+    background-color: aqua;
+    left: 300px;
+    opacity: 1;
+    transition: opacity .25s ease-in-out;
+    -moz-transition: opacity .25s ease-in-out;
+    -webkit-transition: opacity .25s ease-in-out;
+  }
+  .box2:hover {
+    opacity: 0.1;
+    }
+.box3{
+    width: 100px;
+    height: 100px;
+    background-color: aqua;
+    transition: width 2s, height 4s;  ;
+}
+.box3:hover{
+    width: 300px;
+    height: 300px;
+}
+.box4{
+    width: 100px;
+    height: 100px;
+    background-color: aqua;
+
+}
+.box4:hover{
+    animation: bounce ;
+    animation-iteration-count: infinite;
+    animation-duration: 1s;
+
+}
+
+
+
+@keyframes bounce{
+    0%, 40%{transform: translate3d(0px, 20px, 0)}
+    50%, 90%{transform: translate3d(0px, -20px, 0)}
+
+}
+
+.box5{
+    width: 100px;
+    height: 100px;
+    background-color: aqua;
+    opacity: 1;
+}
+.box5:hover
+{
+    animation: tada ;
+    animation-iteration-count: infinite;
+    animation-duration: 2s;
+
+}
+
+@keyframes tada{
+    50%{transform: scale(1.5,1.5);}
+    90%{opacity: 0.1;}
+} 
+
+.box6{
+    width: 100px;
+    height: 100px;
+    background-color: aqua;
+}
+
+.box6:hover{
+    border: 5px groove beige;
+}
+
+.box7{
+    width: 100px;
+    height: 100px;
+    background-color: aqua;
+    transform-origin: 50% 0;
+    animation: swing 3.5s ease-in-out forwards;
+    animation-iteration-count: infinite;
+}
+
+
+@keyframes swing{
+    0%{transform: rotate(10deg);}
+    50%{transform: rotate(-5deg);}
+    100%{transform: rotate(10deg);}
+}
+
+.box8{
+
+    width: 100px;
+    height: 100px;
+    background-color: aqua;
+}
+.box8:hover{
+    animation: squeeze ;
+    animation-iteration-count: infinite;
+    animation-duration: 2s;
+}
+
+@keyframes squeeze {
+    50%{transform: scale(0,1.5);}
+}
+
+.box9{
+    width: 100px;
+    height: 100px;
+    background-color: aqua;
+    opacity: 1;
+}
+.box9:hover{
+    animation: flicker ;
+    animation-iteration-count: infinite;
+    animation-duration: 700ms;
+}
+
+@keyframes flicker{
+    0%,20%,40%,60%,80%,100%{opacity: 1;}
+    10%,30%,50%,70%,90%{opacity: 0;}
+
+}
+
+.box10{
+    width: 100px;
+    height: 100px;
+    background-color: aqua;
+    text-align: center;
+
+}
+.box10:hover{
+    animation: jerk ;
+    animation-iteration-count: infinite;
+    animation-duration: 50ms;
+}
+@keyframes jerk{
+    0%,10%,20%,30%,40%{transform: translate3d(0px, 20px, 0)}
+    50%,60%,70%,80%,90%{transform: translate3d(0px, -20px, 0)}
+}
+
+.box11{
+    width: 100px;
+    height: 100px;
+    background-color: aqua;
+    text-align: center;
+}
+
+.box11:hover{
+    animation: blink;
+    animation-iteration-count: infinite;
+    animation-duration: 5s;
+}
+
+@keyframes blink{
+    0%,60%{opacity: 1;}
+    30%,90%{opacity: 0;}
+}
+
+.box12{
+    width: 100px;
+    height: 100px;
+    background-color: aqua;
+    text-align: center;
+}
+.box12:hover{
+    animation: pop;
+    animation-iteration-count: infinite;
+    animation-duration: 5s;
+}
+
+@keyframes pop{
+    0%,10%{transform: scale(3,3);}
+    20%,100%{opacity: 0;}
+
+}

css/slide22.css

@@ -0,0 +1,24 @@
+.box1{
+    height: 200px;
+    width: 200px;
+    background-color:  rgb(255, 179, 0);
+    margin: 20px;
+    border: 0;
+    border-radius: 5px;
+    /* left: 1200px;  */
+  position: relative;  
+
+    animation: shrink;
+    /* animation-iteration-count: infinite; */
+    animation-duration: 5s;
+
+}
+
+
+@keyframes shrink{
+    0%{transform:scale(1,1);left: 0px;top:0px;}
+    10%{transform:scale(.2,.2);}
+    35%{transform:scale(1,1);left: 700px;top:0px;}
+    50%{transform:scale(.2,.2);}
+    85%{transform:scale(1,1);left: 0px;top:0px;}
+}

css/slide23.css

@@ -0,0 +1,25 @@
+.square1{
+    width: 500px;
+    height:500px;
+    background-color: white;
+    border: 5px solid purple;
+}
+
+.square2{
+
+    width: 200px;
+    height:200px;
+    bottom: 600px;  
+    position: relative;  
+    background-color:blue;
+    animation: move;
+    animation-duration: 3s;
+    animation-iteration-count: infinite
+
+
+}
+@keyframes move{
+    25%{transform: translate(350px,0);}
+    50%{transform: translate(-150px,0);}
+
+}

css/slide24.css

@@ -0,0 +1,34 @@
+.square1{
+    width: 500px;
+    height:500px;
+    background-color: white; 
+    border: 5px solid purple;
+}
+
+.square2{
+
+    width: 100px;
+    height:100px;
+    bottom: 550px;  
+    position: relative;  
+    background-color:blue;
+    animation: move;
+    animation-duration: 5s;
+    animation-iteration-count: infinite;
+    position: relative;  
+    margin: 20px;
+    border: 0;
+    border-radius: 5px;
+
+}
+
+
+@keyframes move{
+    0%{bottom:550px;left:0px;}
+    25%{bottom:550px;left:450px;}
+    50%{bottom: 0px;left:450px;}
+    75%{bottom: 0px;left:0px;}
+    100%{bottom: 550px;left:0px;}
+
+
+}

sldie21.html

@@ -33,7 +33,23 @@
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
 <body> <!-- body begins here -->
-  The quickest of brown foxes
+  <div class="box1">shake</div>
+  <br>
+  <div class="box2">fade</div>
+  <div class="box3">jelly</div>
+  <br>
+  <div class="box4">bounce</div>
+  <br>
+  <div class="box5">Tada</div>
+  <div class= "box6">Groove</div>
+  <div class="box7">swing</div>
+  <br>
+  <div class="box8">super squeeze</div>
+  <div class="box9">flicker</div>
+  <br>
+  <div class="box10">jerk （￣︶￣）↗　</div>
+  <div class="box11">Blink 👁</div>
+  <div class="box12">pop</div>
 
 
 

slide22.html

@@ -33,7 +33,7 @@
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
 <body> <!-- body begins here -->
-  The quickest of brown foxes
+  <div class="box1">shake</div>
 
 
 

slide23.html

@@ -33,7 +33,11 @@
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
 <body> <!-- body begins here -->
-  The quickest of brown foxes
+  <div class="square1">
+  </div>
+  <div class="square2">
+
+  </div>
 
 
 

slide24.html

@@ -33,7 +33,11 @@
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
 <body> <!-- body begins here -->
-  The quickest of brown foxes
+  <div class="square1">
+  </div>
+  <div class="square2">box
+
+  </div>