@keyframes zoom1 {
    0% {
        transform: translate(40%, 50%) scale(.5);
        opacity: 0;
    }

    30% {
        transform: translate(40%, 50%) scale(.5);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0);
        opacity: 100%;
    }
}

@keyframes zoom2 {
    0% {
        transform: translate(-30%, -70%) scale(1.4);
        opacity: 0;
    }

    30% {
        transform: translate(-30%, -70%) scale(1.4);
        opacity: 100%;
    }

    100% {
        transform: translate(0, 0);
        opacity: 100%;
    }
}

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

@keyframes slide {
    from {
        opacity: 0;
    }

    to {
        opacity: 100%;
    }
}

@keyframes bounce {
    0% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.2);
    }

    25% {
        transform: scale(1);
    }

    75% {
        transform: scale(1.2);
    }

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

@keyframes roll {
    0% {
        transform: rotate(90deg);
    }

    25% {
        transform: rotate(180deg) scale(1.5);
        border-radius: 10px;
        background: #464646;
    }

    50% {
        transform: rotate(270deg);
        border-radius: 50%;
        background: #fae9ca;
    }

    75% {
        transform: rotate(360deg) scale(1.5);
        border-radius: 0;
        background: #464646;
    }

    100% {
        border-radius: 50%;
        transform: rotate(430deg);
    }
}