From 6fd16a03a41ddb694347fdd2fa447cf86f2602c8 Mon Sep 17 00:00:00 2001
From: Alonso Ninalaya <pikachualonso@gmail.com>
Date: Wed, 24 Jun 2020 12:31:56 -0400
Subject: [PATCH] adding names of each animation

---
 css/slide21.css | 163 ++++++++++++++++++++++++++++++++++++++++++++++++
 css/slide22.css |  27 ++++++++
 css/slide23.css |  17 +++++
 css/slide24.css |  40 ++++++++++++
 sldie21.html    |  64 ++++++++-----------
 slide22.html    |  48 ++------------
 slide23.html    |  49 ++-------------
 slide24.html    |  49 ++-------------
 8 files changed, 288 insertions(+), 169 deletions(-)

diff --git a/css/slide21.css b/css/slide21.css
index e69de29..9b8eecc 100644
--- a/css/slide21.css
+++ b/css/slide21.css
@@ -0,0 +1,163 @@
+#circle1, #circle2, #circle3, #circle4, #circle5, #circle6, #circle7, #circle8, #circle9, #circle10, #circle11, #circle12 {
+    border-radius: 10px;
+    background-color: blueviolet;
+    border: 2px solid black;
+    width: 67px;
+    height: 76px;
+    margin: 10px;
+}
+
+.container {
+    position: relative;
+    display: flex;
+    justify-content: space-around;
+    height: 50%;
+    width: 50%;
+    left: 25%;
+}
+
+.container2 {
+    position: relative;
+    display: flex;
+    justify-content: space-around;
+}
+
+span{
+    margin: 0px 0px 0px 0px;
+}
+
+#circle1 {
+    animation: shake 0.5s;
+    animation-iteration-count: infinite;
+}
+
+#circle2 {
+    animation: fadeIn ease 2s;
+    animation: fadeIn ease 2s;
+    animation-iteration-count: infinite;
+}
+
+#circle3 {
+    animation: wiggle 0.5s;
+    animation-iteration-count: infinite;
+}
+
+#circle4 {
+    animation: bounce 1s linear;
+    animation-iteration-count: infinite;
+}
+
+#circle5 {
+    animation: tada 1s linear;
+    animation-iteration-count: infinite;
+}
+
+#circle6 {
+    animation: spin 1s linear infinite;
+}
+
+#circle7 {
+    animation: swing 2s linear infinite;
+}
+
+#circle8 {
+    animation: squeeze 2s linear infinite;
+}
+
+#circle9 {
+    animation: flicker 0.5s linear infinite;
+}
+
+#circle11 {
+    animation: blink-animation 1s steps(5, start) infinite;
+}
+
+#circle12 {
+    animation: pop 0.3s linear infinite;
+}
+
+@keyframes pop{
+    50%  {transform: scale(1.2);}
+  }
+
+@keyframes blink-animation {
+    to {
+        visibility: hidden;
+      }
+}
+
+@keyframes flicker {
+    0%   { opacity:1; }
+    50%  { opacity:0; }
+    100% { opacity:1; }
+}
+
+
+@keyframes spin {
+    from{ transform: rotate(0deg);}
+    to{transform: rotate(360deg);}
+}
+
+@keyframes swing { 
+    20% { transform: rotate(15deg); } 
+    40% { transform: rotate(-10deg); } 
+    60% { transform: rotate(5deg); } 
+    80% { transform: rotate(-5deg); } 
+    100% { transform: rotate(0deg); } 
+ } 
+
+@keyframes shake {
+    0% { transform: translate(1px, 1px) rotate(0deg); }
+    10% { transform: translate(-1px, -2px) rotate(-1deg); }
+    20% { transform: translate(-3px, 0px) rotate(1deg); }
+    30% { transform: translate(3px, 2px) rotate(0deg); }
+    40% { transform: translate(1px, -1px) rotate(1deg); }
+    50% { transform: translate(-1px, 2px) rotate(-1deg); }
+    60% { transform: translate(-3px, 1px) rotate(0deg); }
+    70% { transform: translate(3px, 1px) rotate(-1deg); }
+    80% { transform: translate(-1px, -1px) rotate(1deg); }
+    90% { transform: translate(1px, 2px) rotate(0deg); }
+    100% { transform: translate(1px, -2px) rotate(-1deg); }
+}
+
+@keyframes fadeIn {
+    0% {opacity:0;}
+    100% {opacity:1;}
+}
+
+@keyframes bounce {
+    20%,50%,80%,to {
+        transform: translateY(0);
+    }
+    40% {
+        transform: translateY(-30px);
+    }
+    70% {
+        transform: translateY(-15px);
+    }
+    90% {
+        transform: translateY(-4px);
+    }
+}
+
+@keyframes wiggle {
+    20% {
+        transform: scale(0.8,1.3);
+    }
+    50% {
+        transform: scale(1.1,0.8);
+    }
+    75% {
+        transform: scale(0.7,1.2);
+    }
+}
+
+@keyframes tada { 
+    0% {transform: scale(1);}
+    10%, 20% {transform: scale(0.9) rotate(-3deg);} 
+    30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
+    40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} 
+    100% {transform: scale(1) rotate(0);} 
+ }
+
+ 
\ No newline at end of file
diff --git a/css/slide22.css b/css/slide22.css
index e69de29..0b514ba 100644
--- a/css/slide22.css
+++ b/css/slide22.css
@@ -0,0 +1,27 @@
+.square {
+    position: absolute;
+    height: 300px;
+    width: 300px;
+    background-color: yellow;
+    top: 20%;
+    animation: move 5s infinite;
+}
+
+@keyframes move {
+    0% {
+        left:400px;
+    }
+    25%{
+        left: 1000px;
+        transform: scale3d(0.2,0.2,0.2)
+    }
+    50%{
+        transform: translateX(400px);
+    }
+    75%{
+        transform: scale3d(0.2,0.2,0.2);
+    }
+    100% {
+        left: 400px;
+    }
+}
diff --git a/css/slide23.css b/css/slide23.css
index e69de29..98f540c 100644
--- a/css/slide23.css
+++ b/css/slide23.css
@@ -0,0 +1,17 @@
+.purpleCircle {
+    position: absolute;
+    height: 500px;
+    width: 700px;
+    border: 5px solid purple;
+    top: 25%;
+    left: 25%;
+}
+
+.blueCircle{
+    position: absolute;
+    height: 100px;
+    width: 100px;
+    background-color: aqua;
+    top:20%;
+    left: 40%;
+}
\ No newline at end of file
diff --git a/css/slide24.css b/css/slide24.css
index e69de29..6e6d51a 100644
--- a/css/slide24.css
+++ b/css/slide24.css
@@ -0,0 +1,40 @@
+.purpleCircle {
+    position: absolute;
+    height: 500px;
+    width: 700px;
+    border: 5px solid purple;
+    top: 25%;
+    left: 25%;
+}
+
+.blueCircle{
+    position: absolute;
+    height: 100px;
+    width: 100px;
+    background-color: aqua;
+    top:20%;
+    left: 40%;
+    animation: move 5s infinite;
+}
+
+@keyframes move {
+    0% {
+        transform: translate(0,0);
+
+    }
+    25% {
+        transform: translate(400px,0);
+
+    }
+    50% {
+        transform: translate(400px,500px);
+
+    }
+    75% {
+        transform: translate(-300px,500px);
+    }
+    90% {
+        transform: translate(-300px, 0);
+    }
+
+}
\ No newline at end of file
diff --git a/sldie21.html b/sldie21.html
index 84a1006..6fe4c6a 100644
--- a/sldie21.html
+++ b/sldie21.html
@@ -9,47 +9,37 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="">
   <meta name="author" content="">
-
   <link href="./css/slide21.css" rel="stylesheet">
-  <script type="text/javascript" src="./js/header-functions.js"></script>
 
 </head> <!-- header ends here -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-
-
-
-
-
-
-
-
-
-
-
-
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
 <body> <!-- body begins here -->
-  The quickest of brown foxes
-
-
-
-
-  <!-- ====================================================== -->
-  <!-- ====================================================== -->
-  <footer>
-    <!-- footer of page begins here -->
-    <script type="text/javascript" src="./js/footer-functions.js"></script>
-  </footer> <!-- footer of page ends here -->
-  <!-- ====================================================== -->
-  <!-- ====================================================== -->
+  <div class="container">
+    <div id="circle1">shake</div>
+    <div id="circle2">fade</div>
+    <div id="circle3">jelly</div>
+    <div id="circle4">bounce</div>
+    <div id="circle5">tada</div>
+    <div id="circle6">groove</div>
+    <div id="circle7">swing</div>
+    <div id="circle8">squeeze</div>
+    <div id="circle9">flicker</div>
+    <div id="circle10">jerk</div>
+    <div id="circle11">blink</div>
+    <div id="circle12">pop</div>
+  </div>
+  <!-- <div class="container2">
+    <span>one</span>
+    <span>one</span>
+    <span>one</span>
+    <span>one</span>
+    <span>one</span>
+    <span>one</span>
+    <span>one</span>
+    <span>one</span>
+    <span>one</span>
+    <span>one</span>
+    <span>one</span>
+  </div> -->
 
 </body>
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-
 </html>
\ No newline at end of file
diff --git a/slide22.html b/slide22.html
index 983bec0..920c7ff 100644
--- a/slide22.html
+++ b/slide22.html
@@ -1,55 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<head> <!-- header begins here -->
+<head> 
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="">
   <meta name="author" content="">
-
   <link href="./css/slide22.css" rel="stylesheet">
-  <script type="text/javascript" src="./js/header-functions.js"></script>
-
-</head> <!-- header ends here -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-
-
-
-
-
-
-
-
-
-
-
-
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<body> <!-- body begins here -->
-  The quickest of brown foxes
-
-
-
-
-  <!-- ====================================================== -->
-  <!-- ====================================================== -->
-  <footer>
-    <!-- footer of page begins here -->
-    <script type="text/javascript" src="./js/footer-functions.js"></script>
-  </footer> <!-- footer of page ends here -->
-  <!-- ====================================================== -->
-  <!-- ====================================================== -->
+</head> 
+<body> 
 
+  <div class="square"></div>
 </body>
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-
 </html>
\ No newline at end of file
diff --git a/slide23.html b/slide23.html
index ff7a95e..9a170b0 100644
--- a/slide23.html
+++ b/slide23.html
@@ -1,55 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<head> <!-- header begins here -->
+<head> 
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="">
   <meta name="author" content="">
-
   <link href="./css/slide23.css" rel="stylesheet">
-  <script type="text/javascript" src="./js/header-functions.js"></script>
-
-</head> <!-- header ends here -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-
-
-
-
-
-
-
-
-
-
-
-
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<body> <!-- body begins here -->
-  The quickest of brown foxes
-
-
-
-
-  <!-- ====================================================== -->
-  <!-- ====================================================== -->
-  <footer>
-    <!-- footer of page begins here -->
-    <script type="text/javascript" src="./js/footer-functions.js"></script>
-  </footer> <!-- footer of page ends here -->
-  <!-- ====================================================== -->
-  <!-- ====================================================== -->
+</head> 
+<body> 
 
+  <div class="purpleCircle"></div>
+  <div class="blueCircle"></div>
 </body>
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-
 </html>
\ No newline at end of file
diff --git a/slide24.html b/slide24.html
index b1b0ef8..56eb2c0 100644
--- a/slide24.html
+++ b/slide24.html
@@ -1,55 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<head> <!-- header begins here -->
+<head> 
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="">
   <meta name="author" content="">
-
   <link href="./css/slide24.css" rel="stylesheet">
-  <script type="text/javascript" src="./js/header-functions.js"></script>
-
-</head> <!-- header ends here -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-
-
-
-
-
-
-
-
-
-
-
-
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<body> <!-- body begins here -->
-  The quickest of brown foxes
-
-
-
-
-  <!-- ====================================================== -->
-  <!-- ====================================================== -->
-  <footer>
-    <!-- footer of page begins here -->
-    <script type="text/javascript" src="./js/footer-functions.js"></script>
-  </footer> <!-- footer of page ends here -->
-  <!-- ====================================================== -->
-  <!-- ====================================================== -->
+</head> 
+<body> 
 
+  <div class="purpleCircle"></div>
+  <div class="blueCircle"></div>
 </body>
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-
 </html>
\ No newline at end of file