@keyframes sliceInHorizontal {
    0% {
        opacity: 1;
        transform: translateX(-100%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes sliceInVertical {
    0% {
        opacity: 1;
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sliceInGrid {
    0% {
        opacity: 1;
        transform: scale(0) rotate(180deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes sliceInDiagonal {
    0% {
        opacity: 1;
        transform: translateY(-100%) rotate(45deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes slideInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rotateIn {
    0% {
        opacity: 0;
        transform: rotate(-180deg);
    }

    100% {
        opacity: 1;
        transform: rotate(0);
    }
}
   /* Animation Classes */

.slice-horizontal {
    animation: sliceInHorizontal 0.5s ease-out forwards;
    -webkit-animation: sliceInHorizontal 0.5s ease-out forwards;
}

.slice-vertical {
    animation: sliceInVertical 0.5s ease-out forwards;
    -webkit-animation: sliceInVertical 0.5s ease-out forwards;
}

.slice-grid {
    animation: sliceInGrid 0.5s ease-out forwards;
    -webkit-animation: sliceInGrid 0.5s ease-out forwards;
}

.slice-diagonal {
    animation: sliceInDiagonal 0.5s ease-out forwards;
    -webkit-animation: sliceInDiagonal 0.5s ease-out forwards;
}

.text-slide-in {
    animation: slideInRight 0.5s ease-out forwards;
    -webkit-animation: slideInRight 0.5s ease-out forwards;
}

.text-fade-up {
    animation: fadeUp 0.5s ease-out forwards;
    -webkit-animation: fadeUp 0.5s ease-out forwards;
}

.text-bounce-in {
    animation: bounceIn 0.5s ease-out forwards;
    -webkit-animation: bounceIn 0.5s ease-out forwards;
}

.text-rotate-in {
    animation: rotateIn 0.5s ease-out forwards;
    -webkit-animation: rotateIn 0.5s ease-out forwards;
}