Pulsating Text with CSS3  Animations

Quick way to make a simple pulsate animation using CSS3.

CSS3 Pulsate AnimationThe following snippet of HTML, CSS and JavaScript will provide you with a pulsating text effect that fades in and out infitately over a 3 seconds. This is nothing new or spectacular, but it was hard for me to find a simple approach that suited my needs.

CSS3

.pulsate {
    -webkit-animation: pulsate 3s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.5;
}
@-webkit-keyframes pulsate {
    0% { 
        opacity: 0.5;
    }
    50% { 
        opacity: 1.0;
    }
    100% { 
        opacity: 0.5;
    }
}

HTML

<p class="pulsate">Pay attention to me!</p>

My specific use case for this was in a UI design to provide users with in-app push style notifications. This should help you make a simple CSS3 pulsate animation, if that’s what you’re after. Ask questions in the comments below.