Pulsating Text with CSS3  Animations

Quick way to make a simple pulsate animation using CSS3.

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.

Meet the Author

Kevin Leary, WordPress Consultant

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