Tidy-up the css code and add the documentation on README.md
This commit is contained in:
parent
1ab9e3ee0b
commit
75790ed448
67
README.md
67
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.
|
||||
|
||||
643
animation.css
643
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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user