﻿/*Implement blink by spcifying class="blinktext" in the html tag to be blinked. Then the event that */
/*   that causes the long run should move text to the html element that has the animated sylte.     */
/*   Here, it's the click:  OnClientClick="document.getElementById('rooms').innerHTML='WORKING';"   */

.blinktext {
    -webkit-animation: blink-text 800ms linear infinite;
    -moz-animation: blink-text 800ms linear infinite;
    -ms-animation: blink-text 800ms linear infinite;
    -o-animation: blink-text 800ms linear infinite;
    animation: blink-text 1000ms linear infinite;
}

@-webkit-keyframes blink-text {
    50% {
        background-color: yellow;
        opacity: 1;
    }

    100% {
        background-color: yellowgreen;
        opacity: 1;
    }
}

@-moz-keyframes blink-text {
    50% {
        background-color: white;
        opacity: 1;
    }

    100% {
        background-color: yellow;
        opacity: 1;
    }
}

@-ms-keyframes blink-text {
    50% {
        background-color: white;
        opacity: 1;
    }

    100% {
        background-color: yellow;
        opacity: 1;
    }
}

@-o-keyframes blink-text {
    50% {
        background-color: white;
        opacity: 1;
    }

    100% {
        background-color: yellow;
        opacity: 1;
    }
}

@keyframes blink-text {
    50% {
        background-color: white;
        opacity: 1;
    }

    100% {
        background-color: yellow;
        opacity: 1;
    }
}
