@keyframes shake {
    from {
        transform: none
    }

    15% {
        transform: translate3d(-21%,0,0) rotate(-5deg)
    }

    30% {
        transform: translate3d(13%,0,0) rotate(3deg)
    }

    45% {
        transform: translate3d(-8%,0,0) rotate(-3deg)
    }

    60% {
        transform: translate3d(5%,0,0) rotate(2deg)
    }

    75% {
        transform: translate3d(-3%,0,0) rotate(-1deg)
    }

    to {
        transform: none
    }
}

@keyframes fade {
    from { opacity: 0; }
}

@keyframes move-left {
    from { transform: translateX(-100%); }
}

@keyframes move-right {
    from { transform: translateX(100%); }
}

@keyframes shrink {
    from { transform: scale(1.1); }
}

@keyframes grow {
    from { transform: scale(0.9); }
}

@keyframes from-left {
    from {
        transform: scale(0.8) translateX(-50%);
        opacity: 0;
    }
    25%{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

@keyframes from-right {
    from {
        transform: scale(0.8) translateX(50%);
        opacity: 0;
    }
    25%{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

@keyframes from-bottom {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    25%{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.shake {
    animation-name: shake;
}

.fade-in, .fade-out {
    animation-name: fade;
}

.move-left-in, .move-left-out {
    animation-name: move-left;
}

.move-right-in, .move-right-out {
    animation-name: move-right;
}

.shrink-in, .shrink-out {
    animation-name: shrink;
}

.grow-in, .grow-out {
    animation-name: grow;
}

.from-left-in, .from-left-out {
    animation-name: from-left;
}

.from-right-in, .from-right-out {
    animation-name: from-bottom;
}

.from-bottom-in, .from-bottom-out {
    animation-name: from-bottom;
}

.fade-out, .move-left-out, .move-right-out, .shrink-out, .grow-out,
.from-left-out, .from-right-out, .from-bottom-out {
    animation-direction: reverse;
    display: none !important;
}

.shake, .fade-in, .fade-out, .move-left-in, .move-left-out, .move-right-in, .move-right-out,
.shrink-in, .shrink-out, .grow-in, .grow-out, .from-left-in, .from-left-out, .from-right-in, .from-right-out,
.from-bottom-in, .from-bottom-out {
    animation-duration: 0.4s;
}