aji/mightypoint
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Dita Aji Pratama 2024-08-07 12:53:37 +07:00
parent 1ab9e3ee0b
commit 75790ed448
2 changed files with 358 additions and 352 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
README.md
View File

@ -1,6 +1,6 @@
# MightyPoint # MightyPoint
Why must use PowerPoint when you can use MightyPoint? MightyPoint is an animation library that can be use in your web presentation.
## License ## License
@ -20,3 +20,68 @@ GNU General Public License for more details.
You should have received a copy of the GNU General Public License You should have received a copy of the GNU General Public License
along with this program. If not, see https://www.gnu.org/licenses/. 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.

643
animation.css
View File

@ -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 { .hidden {
opacity: 0; 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;
}