.slideDown {
    animation: slideDown;
    animation-fill-mode: forwards;
}

@keyframes slideDown {
    0% { top: -3000px; }
    100% { top: -5%; }
}

.slideUp {
    animation: slideUp;
    animation-fill-mode: forwards;
}

@keyframes slideUp {
    0% { bottom: -3000px; opacity: 0;}
    100% { bottom: 0; opacity: 1;}
}

.slideLeft {
    animation: slideLeft;
    animation-fill-mode: forwards;
}

@keyframes slideLeft {
    0% { right: -3000px }
    100% { right: 0 }
}

.slideRight {
    animation: slideRight;
    animation-fill-mode: forwards;
}

@keyframes slideRight {
    0% { left: -3000px; opacity: 0; }
    100% { left: 0; opacity: 1; }
}

.fadeIn {
    animation: fadeIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.slower {
    animation-duration: 1.3s;
}

.slow {
    animation-duration: 1.2s;
}

.medium {
    animation-duration: 1.1s;
}

.fast {
    animation-duration: 1s;
}