:root {
    --delay: 7s;
}

.UserError {
    -webkit-animation: RedFade 1s forwards; /* Safari 4+ */
    -moz-animation: RedFade 1s forwards; /* Fx 5+ */
    -o-animation: RedFade 1s forwards; /* Opera 12+ */
    animation: RedFade 1s forwards; /* IE 10+, Fx 29+ */
}


@-webkit-keyframes RedFade {
    0% {
        background-color:red;
    }

    100% {
        background-color: #007A9B;
    }
}

@-moz-keyframes RedFade {
    0% {
        background-color: red;
    }

    100% {
        background-color: #007A9B;
    }
}

@-o-keyframes RedFade {
    0% {
        background-color: red;
    }

    100% {
        background-color: #007A9B;
    }
}

@keyframes RedFade {
    0% {
        background-color: red;
        box-shadow: 0px 0px 25px rgba(255,0,0,1);
    }

    100% {
        background-color: #007A9B;
    }
}


.UserErrorMsg {
    -webkit-animation: RedText 1s forwards; /* Safari 4+ */
    -moz-animation: RedText 1s forwards; /* Fx 5+ */
    -o-animation: RedText 1s forwards; /* Opera 12+ */
    animation: RedText 1s forwards; /* IE 10+, Fx 29+ */

    -webkit-animation-delay: var(--delay);
    -moz-animation-delay: var(--delay);
    -o-animation-delay: var(--delay);
    animation-delay: var(--delay);
}

@-webkit-keyframes RedText {
    0% {
        opacity:1.0;
    }

    100% {
        opacity: 0;
        visibility:hidden;
    }
}

@-moz-keyframes RedText {
    0% {
        opacity: 1.0;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@-o-keyframes RedText {
    0% {
        opacity: 1.0;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes RedText {
    0% {
        opacity: 1.0;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}