here is an updated jsdiffle - http://jsfiddle.net/S5PB7/4/ - pulsate with css and then remove it on click
js
$(document).ready(function(){
$("#btn2").click(function(){
$(this).removeClass('pulse');
});
})
css
#btn2{
float: right;
margin: 0px;
padding: 10px;
background-color: blue;
color:white;
cursor: pointer;
border:none;
border-radius:10px;
top:20px;
margin:auto 0;
}
.pulse {
-webkit-animation-name: pulsate;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite
}
@-webkit-keyframes pulsate {
0% { opacity: 0.0}
10% { opacity: .20}
20% { opacity: .40 }
30% { opacity: .60 }
40% { opacity: .80 }
50% { opacity: 1.0}
60% { opacity: .80}
70% { opacity: .60}
80% { opacity: .40}
90% { opacity: .20}
100% { opacity: 0.0}
}