﻿/* Make the element pulse (grow large and small slowly) */
/* Usage
    .myElement {
        animation: pulsate 1s ease-out;
        animation-iteration-count: infinite;
        opacity: 1; 
    }
*/
@-webkit-keyframes pulsate {
    0% { -webkit-transform: scale(0.1, 0.1); opacity: 0.0; }
    50% { opacity: 1.0; }
    100% { -webkit-transform: scale(1.2, 1.2); opacity: 0.0; }
}

/* Make the element's opacity pulse*/
/* Usage
    .myElement {
        animation: opacityPulse 1s ease-out;
        animation-iteration-count: infinite;
        opacity: 0; 
    }
*/
@-webkit-keyframes opacityPulse {
    0% { opacity: 0.0; }
    50% { opacity: 1.0; }
    100% { opacity: 0.0; }
}

@-webkit-keyframes alertPulse {
    0% { background-color: #9A2727; opacity: 1; }
    50% { opacity: red; opacity: 0.75; }
    100% { opacity: #9A2727; opacity: 1; }
}

@keyframes rotating {
    from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
}

* { tab-size: 4; }
