A "flash" of color, using pure css transitions

Question

I am trying to give users a "flash" of color when there is a click event. I can get the color to appear in a pleasing fashion using a transition, however I want the color to disappear after .5s, without removing the "active" class. One requirement though is that I cannot use jQuery animations and this must be done in CSS.

Below is the css I am using currently.

.active{   background-color: yellow;   -webkit-transition: background-color .5s linear;   transition: background-color .5s linear; } 

I tried specifying a second value however I do not think this is valid markup as it does not work.

.active{   background-color: yellow;   -webkit-transition: background-color .5s linear, background-color:transparent .5s linear;   transition: background-color .5s linear, background-color:transparent .5s linear; } 

http://jsbin.com/itivum/1/edit

Answer 1

I think this is what you are looking for. The sample is not exact.

$("#go").click(function() {      $("#box").removeClass("demo");      setTimeout(function() {          $("#box").addClass("demo");      }, 1);  });

.container {position: relative;}    #box {      height: 100px;       width: 100px;       background-color: #777;      position: absolute;      left: 5px;      top: 5px;      opacity: 0;  }    @-webkit-keyframes demo {      0% {          background-color: Yellow;          opacity:1;      }      22% {          background-color: Yellow;      }      77% {          background-color: Red;      }      100% {          background-color: #777;      }  }        .demo {      -webkit-animation-name: demo;      -webkit-animation-duration: 900ms;      -webkit-animation-iteration-count: 1;      -webkit-animation-timing-function: ease-in-out;  }    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>      <button id="go">Go</button>  <div class="container">      <div id="box"></div>  </div>

Hope you will get the solution you are looking for from this.

EDIT :

I have edited your JS Bin.

This will be what you are exactly looking for

http://jsbin.com/imonab/1/edit

Answer 2

I came up with the following based on my own needs. I wanted a flash of color to confirm a user action. The text flashes once when you click on it. It does use jquery to set the class, but not for the animation.

Html:

<span style="background:lightgray" id="id">Click to flash</span> 

Js:

$('#id').click(function() {     $('#id').addClass('flash');     setTimeout(function() {           $('#id').removeClass('flash');     }, 500); }); 

Css:

.flash {     -webkit-animation-name: flash-animation;     -webkit-animation-duration: 0.3s;      animation-name: flash-animation;     animation-duration: 0.3s; }  @-webkit-keyframes flash-animation {       from { background: yellow; }     to   { background: default; } }  @keyframes flash-animation {       from { background: yellow; }     to   { background: default; } } 

See http://jsfiddle.net/umz8t/3597/