From 75790ed448ada98580d2b44b1842ac052bc8a6bc Mon Sep 17 00:00:00 2001
From: ditaajipratama <ditaajipratama@protonmail.com>
Date: Wed, 7 Aug 2024 12:53:37 +0700
Subject: [PATCH] Tidy-up the css code and add the documentation on README.md

---
 README.md     |  67 +++++-
 animation.css | 643 +++++++++++++++++++++++---------------------------
 2 files changed, 358 insertions(+), 352 deletions(-)

diff --git a/README.md b/README.md
index 233d516..7c9b8dc 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # MightyPoint
 
-Why must use PowerPoint when you can use MightyPoint?
+MightyPoint is an animation library that can be use in your web presentation.
 
 ## License
 
@@ -20,3 +20,68 @@ GNU General Public License for more details.
 
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see https://www.gnu.org/licenses/.
+
+## Getting Started
+
+Usage:
+
+```html
+<p class="ANIMATION-TRANSITION">Hello world</p>
+<!-- or -->
+<p class="ANIMATION-TRANSITION-DIRECTION">Hello world</p>
+```
+
+Example:
+
+```html
+<p class="zoom-in">Hello world</p>
+<!-- or -->
+<p class="fade-in-left">Hello world</p>
+
+```
+
+## Animations
+
+Here's a breakdown of the animations listed:
+
+1. `hidden`
+
+2. Fade In Animations:
+   - `fade-in`
+   - `fade-in-left`
+   - `fade-in-right`
+   - `fade-in-top`
+   - `fade-in-bottom`
+
+3. Fade Out Animations:
+   - `fade-out`
+   - `fade-out-left`
+   - `fade-out-right`
+   - `fade-out-top`
+   - `fade-out-bottom`
+
+4. Zoom Animations:
+   - `zoom-in`
+   - `zoom-out`
+
+5. Fly In Animations:
+   - `fly-in-left`
+   - `fly-in-right`
+   - `fly-in-top`
+   - `fly-in-bottom`
+
+6. Fly Out Animations:
+   - `fly-out-left`
+   - `fly-out-right`
+   - `fly-out-top`
+   - `fly-out-bottom`
+
+7. Spin Animations:
+   - `spin-in-clockwise`
+   - `spin-in-counterclockwise`
+   - `spin-out-clockwise`
+   - `spin-out-counterclockwise`
+
+8. `typing`
+
+In total, we have 26 animations.
diff --git a/animation.css b/animation.css
index 067858b..7fa6aa1 100644
--- a/animation.css
+++ b/animation.css
@@ -1,354 +1,295 @@
-/* animations.css */
-
-/* Fade In Animation */
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-.fade-in {
-    animation: fadeIn 2s ease-in-out;
-}
-
-/* Fade Out Animation */
-@keyframes fadeOut {
-    from {
-        opacity: 1;
-    }
-    to {
-        opacity: 0;
-    }
-}
-
-.fade-out {
-    animation: fadeOut 2s ease-in-out;
-}
-
-/* Fade In From Left */
-@keyframes fadeInLeft {
-    from {
-        opacity: 0;
-        transform: translateX(-20px); /* Adjust the value for the desired effect */
-    }
-    to {
-        opacity: 1;
-        transform: translateX(0);
-    }
-}
-
-.fade-in-left {
-    animation: fadeInLeft 2s ease-in-out forwards;
-}
-
-/* Fade In From Right */
-@keyframes fadeInRight {
-    from {
-        opacity: 0;
-        transform: translateX(20px); /* Adjust the value for the desired effect */
-    }
-    to {
-        opacity: 1;
-        transform: translateX(0);
-    }
-}
-
-.fade-in-right {
-    animation: fadeInRight 2s ease-in-out forwards;
-}
-
-/* Fade In From Top */
-@keyframes fadeInTop {
-    from {
-        opacity: 0;
-        transform: translateY(-20px); /* Adjust the value for the desired effect */
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.fade-in-top {
-    animation: fadeInTop 2s ease-in-out forwards;
-}
-
-/* Fade In From Bottom */
-@keyframes fadeInBottom {
-    from {
-        opacity: 0;
-        transform: translateY(20px); /* Adjust the value for the desired effect */
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.fade-in-bottom {
-    animation: fadeInBottom 2s ease-in-out forwards;
-}
-
-/* Fly In Animations */
-
-/* Fly In From Left */
-@keyframes flyInLeft {
-    from {
-        transform: translateX(-100%);
-        opacity: 0;
-    }
-    to {
-        transform: translateX(0);
-        opacity: 1;
-    }
-}
-
-.fly-in-left {
-    animation: flyInLeft 2s ease-out;
-}
-
-/* Fly Out To Left */
-@keyframes flyOutLeft {
-    from {
-        transform: translateX(0);
-        opacity: 1;
-    }
-    to {
-        transform: translateX(-100%);
-        opacity: 0;
-    }
-}
-
-.fly-out-left {
-    animation: flyOutLeft 2s ease-out;
-}
-
-/* Fly In From Right */
-@keyframes flyInRight {
-    from {
-        transform: translateX(100%);
-        opacity: 0;
-    }
-    to {
-        transform: translateX(0);
-        opacity: 1;
-    }
-}
-
-.fly-in-right {
-    animation: flyInRight 2s ease-out;
-}
-
-/* Fly Out To Right */
-@keyframes flyOutRight {
-    from {
-        transform: translateX(0);
-        opacity: 1;
-    }
-    to {
-        transform: translateX(100%);
-        opacity: 0;
-    }
-}
-
-.fly-out-right {
-    animation: flyOutRight 2s ease-out;
-}
-
-/* Fly In From Top */
-@keyframes flyInTop {
-    from {
-        transform: translateY(-100%);
-        opacity: 0;
-    }
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
-}
-
-.fly-in-top {
-    animation: flyInTop 2s ease-out;
-}
-
-/* Fly Out To Top */
-@keyframes flyOutTop {
-    from {
-        transform: translateY(0);
-        opacity: 1;
-    }
-    to {
-        transform: translateY(-100%);
-        opacity: 0;
-    }
-}
-
-.fly-out-top {
-    animation: flyOutTop 2s ease-out;
-}
-
-/* Fly In From Bottom */
-@keyframes flyInBottom {
-    from {
-        transform: translateY(100%);
-        opacity: 0;
-    }
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
-}
-
-.fly-in-bottom {
-    animation: flyInBottom 2s ease-out;
-}
-
-/* Fly Out To Bottom */
-@keyframes flyOutBottom {
-    from {
-        transform: translateY(0);
-        opacity: 1;
-    }
-    to {
-        transform: translateY(100%);
-        opacity: 0;
-    }
-}
-
-.fly-out-bottom {
-    animation: flyOutBottom 2s ease-out;
-}
-
-/* Zoom In Animations */
-
-/* Zoom In */
-@keyframes zoomIn {
-    from {
-        transform: scale(0);
-        opacity: 0;
-    }
-    to {
-        transform: scale(1);
-        opacity: 1;
-    }
-}
-
-.zoom-in {
-    animation: zoomIn 1.5s ease-in-out;
-}
-
-/* Zoom Out */
-@keyframes zoomOut {
-    from {
-        transform: scale(1);
-        opacity: 1;
-    }
-    to {
-        transform: scale(0);
-        opacity: 0;
-    }
-}
-
-.zoom-out {
-    animation: zoomOut 1.5s ease-in-out;
-}
-
-/* Spin Animations */
-
-/* Spin Clockwise */
-@keyframes spinClockwise {
-    from {
-        transform: rotate(0deg);
-        opacity: 0;
-    }
-    to {
-        transform: rotate(360deg);
-        opacity: 1;
-    }
-}
-
-.spin-clockwise {
-    animation: spinClockwise 2s ease-in-out;
-}
-
-/* Spin Counterclockwise */
-@keyframes spinCounterclockwise {
-    from {
-        transform: rotate(0deg);
-        opacity: 0;
-    }
-    to {
-        transform: rotate(-360deg);
-        opacity: 1;
-    }
-}
-
-.spin-counterclockwise {
-    animation: spinCounterclockwise 2s ease-in-out;
-}
-
-/* Spin Out Clockwise */
-@keyframes spinOutClockwise {
-    from {
-        transform: rotate(360deg);
-        opacity: 1;
-    }
-    to {
-        transform: rotate(0deg);
-        opacity: 0;
-    }
-}
-
-.spin-out-clockwise {
-    animation: spinOutClockwise 2s ease-in-out;
-}
-
-/* Spin Out Counterclockwise */
-@keyframes spinOutCounterclockwise {
-    from {
-        transform: rotate(-360deg);
-        opacity: 1;
-    }
-    to {
-        transform: rotate(0deg);
-        opacity: 0;
-    }
-}
-
-.spin-out-counterclockwise {
-    animation: spinOutCounterclockwise 2s ease-in-out;
-}
-
-/* Typing Animation */
-@keyframes typing {
-    from {
-        width: 0;
-    }
-    to {
-        width: 100%;
-    }
-}
-
-@keyframes blinkCursor {
-    from {
-        border-right-color: rgba(0, 0, 0, 0.75);
-    }
-    to {
-        border-right-color: transparent;
-    }
-}
-
-.typing {
-    white-space: nowrap;
-    overflow: hidden;
-    border-right: 2px solid rgba(0, 0, 0, 0.75);
-    width: 0;
-    animation: typing 4s steps(40, end), blinkCursor 0.75s step-end infinite;
-}
-
 .hidden {
     opacity: 0;
 }
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.fade-in { animation: fadeIn 2s ease-in-out forwards; }
+
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+.fade-in-left { animation: fadeInLeft 2s ease-in-out forwards; }
+
+@keyframes fadeInRight {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+.fade-in-right { animation: fadeInRight 2s ease-in-out forwards; }
+
+@keyframes fadeInTop {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.fade-in-top { animation: fadeInTop 2s ease-in-out forwards; }
+
+@keyframes fadeInBottom {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.fade-in-bottom { animation: fadeInBottom 2s ease-in-out forwards; }
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+.fade-out { animation: fadeOut 2s ease-in-out forwards; }
+
+@keyframes fadeOutLeft {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+}
+.fade-out-left { animation: fadeOutLeft 2s ease-in-out forwards; }
+
+@keyframes fadeOutRight {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+}
+.fade-out-right { animation: fadeOutRight 2s ease-in-out forwards; }
+
+@keyframes fadeOutTop {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+}
+.fade-out-top { animation: fadeOutTop 2s ease-in-out forwards; }
+
+@keyframes fadeOutBottom {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+}
+.fade-out-bottom { animation: fadeOutBottom 2s ease-in-out forwards; }
+
+@keyframes zoomIn {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+.zoom-in { animation: zoomIn 1.5s ease-in-out forwards; }
+
+@keyframes zoomOut {
+  from {
+    transform: scale(1);
+    opacity: 1;
+  }
+  to {
+    transform: scale(0);
+    opacity: 0;
+  }
+}
+.zoom-out { animation: zoomOut 1.5s ease-in-out forwards; }
+
+@keyframes flyInLeft {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+.fly-in-left { animation: flyInLeft 2s ease-out; }
+
+@keyframes flyInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+.fly-in-right { animation: flyInRight 2s ease-out; }
+
+@keyframes flyInTop {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+.fly-in-top { animation: flyInTop 2s ease-out; }
+
+@keyframes flyInBottom {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+.fly-in-bottom { animation: flyInBottom 2s ease-out; }
+
+@keyframes flyOutLeft {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+.fly-out-left { animation: flyOutLeft 2s ease-out forwards; }
+
+@keyframes flyOutRight {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+.fly-out-right { animation: flyOutRight 2s ease-out forwards; }
+
+@keyframes flyOutTop {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+}
+.fly-out-top { animation: flyOutTop 2s ease-out forwards; }
+
+@keyframes flyOutBottom {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+}
+.fly-out-bottom { animation: flyOutBottom 2s ease-out forwards; }
+
+@keyframes spinInClockwise {
+  from {
+    transform: rotate(0deg);
+    opacity: 0;
+  }
+  to {
+    transform: rotate(360deg);
+    opacity: 1;
+  }
+}
+.spin-in-clockwise { animation: spinInClockwise 2s ease-in-out; }
+
+@keyframes spinInCounterclockwise {
+  from {
+    transform: rotate(0deg);
+    opacity: 0;
+  }
+  to {
+    transform: rotate(-360deg);
+    opacity: 1;
+  }
+}
+.spin-in-counterclockwise { animation: spinInCounterclockwise 2s ease-in-out; }
+
+@keyframes spinOutClockwise {
+  from {
+    transform: rotate(360deg);
+    opacity: 1;
+  }
+  to {
+    transform: rotate(0deg);
+    opacity: 0;
+  }
+}
+.spin-out-clockwise { animation: spinOutClockwise 2s ease-in-out forwards; }
+
+@keyframes spinOutCounterclockwise {
+  from {
+    transform: rotate(-360deg);
+    opacity: 1;
+  }
+  to {
+    transform: rotate(0deg);
+    opacity: 0;
+  }
+}
+.spin-out-counterclockwise { animation: spinOutCounterclockwise 2s ease-in-out forwards; }
+
+@keyframes typing {
+  from { width: 0; }
+  to { width: 100%; }
+}
+@keyframes blinkCursor {
+  from { border-right-color: rgba(0, 0, 0, 0.75); }
+  to { border-right-color: transparent; }
+}
+.typing {
+  white-space: nowrap;
+  overflow: hidden;
+  border-right: 2px solid rgba(0, 0, 0, 0.75);
+  width: 0;
+  animation: typing 4s steps(40, end), blinkCursor 0.75s step-end infinite forwards;
+}