JSFiddle - React, Tailwind, and code Playground

by billjohnston4

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<span class='big-centered fa fa-beer pulse'></span>

CSS

.big-centered{font-size:200px; height:1em; width:1em; margin:auto; position:absolute; top:0; left:0; right:0; bottom:0;}

.pulse {
  display: inline-block;
  -moz-animation: pulse 2s infinite linear;
  -o-animation: pulse 2s infinite linear;
  -webkit-animation: pulse 2s infinite linear;
  animation: pulse 2s infinite linear;
}

@-webkit-keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.2; }
  100% { opacity: 1; }
}
@-moz-keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.2; }
  100% { opacity: 1; }
}
@-o-keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.2; }
  100% { opacity: 1; }
}
@-ms-keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.2; }
  100% { opacity: 1; }
}
@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.2; }
  100% { opacity: 1; }
}

JavaScript

$('.pulse').on('click', function(){
    $(this).removeClass('pulse');
});