/*From and to is just another way of saying start at 0 and end at 100%.*/
@keyframes revealText-slideUp {
    from {
        transform: translateY(20px); /*Moves the element down by 20px.*/
    }

    to {
        opacity: 1; /*Turn the opacity back on so that we can see the element in it's final animation state.*/
        transform: none; /*Removes the 20px so that the text will be at the normal starting position at the end of the animation.*/
    }
}

/*From and to is just another way of saying start at 0 and end at 100%.*/
@keyframes revealText {
    to {
        opacity: 1; /*Turn the opacity back on so that we can see the element in it's final animation state.*/
        transform: none; /*Removes the 20px so that the text will be at the normal starting position at the end of the animation.*/
    }
}

@keyframes backgroundAnimate {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

.animate-revealText-slideUp {
    opacity: 0;
    animation: revealText-slideUp 3s forwards;
}

.animate-background {
    background-size: 400% 400%;
    animation: backgroundAnimate 12s infinite ease-in-out;
}