∞

Useful infinite CSS animations that you can drop into your project.

pulsate

This will generate a pulsating item that changes opacity and scale. I normally use it for loading indicators.

.pulsate-css {
    animation: pulsate 1s ease-out;
    animation-iteration-count: infinite; 
    opacity: 0.0;

    /* you dont need the stuff below, but its what I used to create the loading circle */
    border: 3px solid #999;
    border-radius: 30px;
    height: 18px;
    width: 18px;
    position: relative;
    display: inline-block;
    margin-top: 20px;
    text-align: center;
}
            

opacityPulse

This will generate an opacity pulse. Useful for muted text items.

.opacityPulse-css {
    animation: opacityPulse 2s ease-out;
    animation-iteration-count: infinite; 
    opacity: 1;
}
            

alertPulse

This will generate a background-color pulse. Since it is red, I call it an alert pulse.

.alertPulse-css {
    animation: alertPulse 2s ease-out;
    animation-iteration-count: infinite;
    opacity: 1;
    background: #9A2727; /* you need this to specify a color to pulse to */
}
            

rotating

This will generate an infinitely rotating item. The speed is dependent on the animation duration (2s for this example).

.rotating-css {
    animation: rotating 2s linear;
    animation-iteration-count: infinite;
}