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