.fade-up {
    opacity: 0;
    transform: translateY(10px);
}

.fade-down {
    opacity: 0;
    transform: translateY(-10px);
}

.fade-left {
    opacity: 0;
    transform: translateX(10px);
}

.fade-right {
    opacity: 0;
    transform: translateX(-10px);
}

.fade-expand {
    opacity: 0;
    transform: scale(0.98);
}

.fade-shrink {
    opacity: 0;
    transform: scale(1.02);
}

.expand {
    transform: scale(0);
}

.shrink {
    transform: scale(2);
}

.spin {
    transform: rotate(0deg);
    animation: spin 2s linear infinite;
}

.cover-up {
    opacity: 0;
    transform: translateY(16px);
}

.animate {
    animation-duration: .5s;
    animation-timing-function: linear;
    animation-fill-mode: both;
}

.fade-in { opacity: 0; }
.animate.fade-in { opacity: 1; animation-name: fade-in; }
.animate.fade-up { opacity: 1; animation-name: fade-up; }
.animate.fade-down { opacity: 1; animation-name: fade-down; }
.animate.fade-left { opacity: 1; animation-name: fade-left; }
.animate.fade-right { opacity: 1; animation-name: fade-right; }
.animate.fade-expand { opacity: 1; transform: scale(1); animation-name: fade-expand; }
.animate.fade-shrink { opacity: 1; transform: scale(1); animation-name: fade-shrink; }
.animate.expand { transform: scale(1); animation-name: expand; }
.animate.shrink { transform: scale(1); animation-name: shrink; }
.animate.cover-up { opacity: 1; animation-name: cover-up; }

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-left {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-right {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes cover-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes expand {
    from {transform: scale(0);}
    to {transform: scale(1);}
}

@keyframes fade-expand {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shrink {
    from {transform: scale(2);}
    to {transform: scale(1);}
}

@keyframes fade-shrink {
    from {
        opacity: 0;
        transform: scale(2);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes spin {
    to {transform: rotate(0deg);}
    from {transform: rotate(360deg);}
}

@keyframes loader-animate {
    from {transform: scaleX(0);}
}