.fade-in {
    opacity: 1;
    animation-name: fade-in;
    animation-duration: .5s;
    animation-timing-function: linear;
}

.fade-up {
    opacity: 1;
    animation-name: fade-up;
    animation-duration: .5s;
    animation-timing-function: linear;
}

.fade-down {
    opacity: 1;
    animation-name: fade-down;
    animation-duration: .5s;
    animation-timing-function: linear;
}

.fade-left {
    opacity: 1;
    animation-name: fade-left;
    animation-duration: .5s;
    animation-timing-function: linear;
}

.fade-right {
    opacity: 1;
    animation-name: fade-right;
    animation-duration: .5s;
    animation-timing-function: linear;
}

.fade-expand {
    opacity: 1;
    transform: scale(1);
    animation-name: fade-expand;
    animation-duration: .5s;
    animation-timing-function: linear;
}

.fade-shrink {
    opacity: 1;
    transform: scale(1);
    animation-name: fade-shrink;
    animation-duration: .5s;
    animation-timing-function: linear;
}

.expand {
    transform: scale(1);
    animation-name: expand;
    animation-duration: .5s;
    animation-timing-function: linear;
}

.shrink {
    transform: scale(1);
    animation-name: shrink;
    animation-duration: .5s;
    animation-timing-function: linear;
}

.spin {
    transform: rotate(0deg);
    animation-name: spin;
    animation-duration: .5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

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

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

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

@keyframes fade-left {
    from {
        opacity: 0;
        transform: translateX(4rem);
    }
}

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

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

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

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

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

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes slide-left {
    from {
        opacity: 0;
        transform: translateX(calc(-100vh + 880px))
    }
}

@keyframes spin-fade {
    from {
        transform: rotate(-270deg) translate(5rem, 5rem);
        opacity: 0;
    }
    to {
        transform: rotate(-360deg);
        opacity: 1;
    }
}