@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px)
    }

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px)
    }

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

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(.9)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes bounce {
    0%,100%,50% {
        transform: translateY(0)
    }

    25% {
        transform: translateY(-8px)
    }

    75% {
        transform: translateY(-4px)
    }
}

@keyframes scale {
    0%,100% {
        transform: scale(.9)
    }

    50% {
        transform: scale(1.1)
    }
}

.fade-in {
    animation: .5s ease-in-out fadeIn
}

.fade-up {
    animation: .5s ease-in-out fadeUp
}

.slide-left {
    animation: .5s ease-in-out slideInLeft
}

.slide-right {
    animation: .5s ease-in-out slideInRight
}

.zoom-in {
    animation: .5s ease-in-out zoomIn
}

.bounce {
    animation: .9s both bounce
}

.scalling {
    animation: 2s ease-in-out infinite scale
}