.zoom-in {
    animation-name: zoomin-anime;
    animation-duration: .6s;
    animation-delay: 0.6s;
    animation-fill-mode: forwards;
    opacity: 0;
}


@keyframes zoomin-anime {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }

    70% {
        transform: scale(1.1);
        opacity: 1;
    }

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

.fadein-up {
    animation-name: fadein-up;
    animation-duration: .4s;
    animation-delay: 0s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    opacity: 0;
}


@keyframes fadein-up {

    0% {
        -webkit-transform: translateY(80px);
        transform: translateY(80px);
        opacity: 0;
    }

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

}

.fadein-down {
    animation-name: fadein-down;
    animation-duration: .4s;
    animation-delay: .6s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadein-down {

    0% {
        -webkit-transform: translateY(-80px);
        transform: translateY(-80px);
        opacity: 0;
    }

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

}

.fadein-left {
    animation-name: fadein-left;
    animation-duration: .4s;
    animation-delay: .5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadein-left {

    0% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        opacity: 0;
    }

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

}

.fadein-right {
    animation-name: fadein-right;
    animation-duration: .4s;
    animation-delay: .5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    opacity: 0;
    transform: rotate(-5deg);
}

@keyframes fadein-right {

    0% {
        -webkit-transform: translateX(200px);
        transform: translateX(200px);
        opacity: 0;
    }

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

}

.fadein-in {
    animation-name: fadein-anime;
    animation-duration: .8s;
    animation-delay: 1.6s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadein-anime {

    0% {
        opacity: 0;
    }

    100% {
        opacity: 1
    }

}

.rotation-right {
    animation: 6s linear infinite rotation-right;
}

@keyframes rotation-right {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.rotation-left {
    animation: 6s linear infinite rotation-left;
}

@keyframes rotation-left {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(-360deg);
    }
}

.up-down {
    animation: 4s ease infinite up-down;
}

@keyframes up-down {

    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    50% {
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

}