Pulse An HTML Element Using CSS

Create a pulsating effect on an HTML element to call attention for the user to take some action. This will gently call the user's attention to a button or link or some piece of information.

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

Example:

CSS
Add the css above, and add an HTML element with class = "pulse" below.

HTML
<div style="background:red; color:white; display:inline; line-height:60px; font-size:30px; box-shadow:3px 3px 3px gray; border-radius:6px;"  class="pulse"> Hello, I have a pulse </div>

  Hello, I have a pulse