mightypoint/animation.css

/* 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;
}