, LLC.

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.


.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;


<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.

Meet the Author

Kevin Leary, WordPress Consultant

I'm a freelance web developer and WordPress consultant in Boston, MA with 16 years of experience building websites and applications. View a portfolio of my work or request an estimate for your next project.