Tidy-up the css code and add the documentation on README.md

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.

animation.css

@@ -1,230 +1,115 @@
-/* animations.css */
+.hidden {
+    opacity: 0;
+}
 
-/* Fade In Animation */
 @keyframes fadeIn {
-    from {
+  from { opacity: 0; }
-        opacity: 0;
+  to { opacity: 1; }
-    }
-    to {
-        opacity: 1;
-    }
 }
+.fade-in { animation: fadeIn 2s ease-in-out forwards; }
 
-.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 */
+    transform: translateX(-20px);
   }
   to {
     opacity: 1;
     transform: translateX(0);
   }
 }
+.fade-in-left { animation: fadeInLeft 2s ease-in-out forwards; }
 
-.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 */
+    transform: translateX(20px);
   }
   to {
     opacity: 1;
     transform: translateX(0);
   }
 }
+.fade-in-right { animation: fadeInRight 2s ease-in-out forwards; }
 
-.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 */
+    transform: translateY(-20px);
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
+.fade-in-top { animation: fadeInTop 2s ease-in-out forwards; }
 
-.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 */
+    transform: translateY(20px);
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
+.fade-in-bottom { animation: fadeInBottom 2s ease-in-out forwards; }
 
-.fade-in-bottom {
+@keyframes fadeOut {
-    animation: fadeInBottom 2s ease-in-out forwards;
+  from { opacity: 1; }
+  to { opacity: 0; }
 }
+.fade-out { animation: fadeOut 2s ease-in-out forwards; }
 
-/* Fly In Animations */
+@keyframes fadeOutLeft {
-
-/* Fly In From Left */
-@keyframes flyInLeft {
   from {
-        transform: translateX(-100%);
+    opacity: 1;
-        opacity: 0;
-    }
-    to {
     transform: translateX(0);
-        opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-20px);
   }
 }
+.fade-out-left { animation: fadeOutLeft 2s ease-in-out forwards; }
 
-.fly-in-left {
+@keyframes fadeOutRight {
-    animation: flyInLeft 2s ease-out;
-}
-
-/* Fly Out To Left */
-@keyframes flyOutLeft {
   from {
+    opacity: 1;
     transform: translateX(0);
-        opacity: 1;
   }
   to {
-        transform: translateX(-100%);
     opacity: 0;
+    transform: translateX(20px);
   }
 }
+.fade-out-right { animation: fadeOutRight 2s ease-in-out forwards; }
 
-.fly-out-left {
+@keyframes fadeOutTop {
-    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;
+    transform: translateY(-20px);
   }
 }
+.fade-out-top { animation: fadeOutTop 2s ease-in-out forwards; }
 
-.fly-out-top {
+@keyframes fadeOutBottom {
-    animation: flyOutTop 2s ease-out;
-}
-
-/* Fly In From Bottom */
-@keyframes flyInBottom {
   from {
-        transform: translateY(100%);
+    opacity: 1;
-        opacity: 0;
+    transform: translateY(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;
+    transform: translateY(20px);
   }
 }
+.fade-out-bottom { animation: fadeOutBottom 2s ease-in-out forwards; }
 
-.fly-out-bottom {
-    animation: flyOutBottom 2s ease-out;
-}
-
-/* Zoom In Animations */
-
-/* Zoom In */
 @keyframes zoomIn {
   from {
     transform: scale(0);
@@ -235,12 +120,8 @@
     opacity: 1;
   }
 }
+.zoom-in { animation: zoomIn 1.5s ease-in-out forwards; }
 
-.zoom-in {
-    animation: zoomIn 1.5s ease-in-out;
-}
-
-/* Zoom Out */
 @keyframes zoomOut {
   from {
     transform: scale(1);
@@ -251,15 +132,105 @@
     opacity: 0;
   }
 }
+.zoom-out { animation: zoomOut 1.5s ease-in-out forwards; }
 
-.zoom-out {
+@keyframes flyInLeft {
-    animation: zoomOut 1.5s ease-in-out;
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
 }
+.fly-in-left { animation: flyInLeft 2s ease-out; }
 
-/* Spin Animations */
+@keyframes flyInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+.fly-in-right { animation: flyInRight 2s ease-out; }
 
-/* Spin Clockwise */
+@keyframes flyInTop {
-@keyframes spinClockwise {
+  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;
@@ -269,13 +240,9 @@
     opacity: 1;
   }
 }
+.spin-in-clockwise { animation: spinInClockwise 2s ease-in-out; }
 
-.spin-clockwise {
+@keyframes spinInCounterclockwise {
-    animation: spinClockwise 2s ease-in-out;
-}
-
-/* Spin Counterclockwise */
-@keyframes spinCounterclockwise {
   from {
     transform: rotate(0deg);
     opacity: 0;
@@ -285,12 +252,8 @@
     opacity: 1;
   }
 }
+.spin-in-counterclockwise { animation: spinInCounterclockwise 2s ease-in-out; }
 
-.spin-counterclockwise {
-    animation: spinCounterclockwise 2s ease-in-out;
-}
-
-/* Spin Out Clockwise */
 @keyframes spinOutClockwise {
   from {
     transform: rotate(360deg);
@@ -301,12 +264,8 @@
     opacity: 0;
   }
 }
+.spin-out-clockwise { animation: spinOutClockwise 2s ease-in-out forwards; }
 
-.spin-out-clockwise {
-    animation: spinOutClockwise 2s ease-in-out;
-}
-
-/* Spin Out Counterclockwise */
 @keyframes spinOutCounterclockwise {
   from {
     transform: rotate(-360deg);
@@ -317,38 +276,20 @@
     opacity: 0;
   }
 }
+.spin-out-counterclockwise { animation: spinOutCounterclockwise 2s ease-in-out forwards; }
 
-.spin-out-counterclockwise {
-    animation: spinOutCounterclockwise 2s ease-in-out;
-}
-
-/* Typing Animation */
 @keyframes typing {
-    from {
+  from { width: 0; }
-        width: 0;
+  to { width: 100%; }
-    }
-    to {
-        width: 100%;
-    }
 }
-
 @keyframes blinkCursor {
-    from {
+  from { border-right-color: rgba(0, 0, 0, 0.75); }
-        border-right-color: rgba(0, 0, 0, 0.75);
+  to { border-right-color: transparent; }
-    }
-    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;
+  animation: typing 4s steps(40, end), blinkCursor 0.75s step-end infinite forwards;
-}
-
-.hidden {
-    opacity: 0;
 }