JSFiddle - React, Tailwind, and code Playground

by Douglas Crosby

HTML

<a href="#"></a>

CSS

.flash{

  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;

  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;

  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;

}

@-webkit-keyframes flash {
    0% { background-color:none;}
    50% { background-color:#cccccc;}        
    100% {background-color:none;}
}

@-moz-keyframes flash {
    0% { background-color:none;}
    50% { background-color:#cccccc;}        
    100% {background-color:none;}
}

@-ms-keyframes flash {
    0% { background-color:none;}
    50% { background-color:#cccccc;}        
    100% {background-color:none;}
}

a{
    display:block;
    width:100%;
    height:300px;
    background:#333;
}

JavaScript

$("a").click(function(e){
    e.preventDefault();
    
    $("a").addClass("flash");
    
    setTimeout( function(){
        $("a").removeClass("flash");
    }, 1000);	// Timeout must be the same length as the CSS3 transition or longer (or you'll mess up the transition)
});