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/

Answer 3

Impressed by Rohith's answer, here is my own JSFiddle demo (with added functionality)

The main part is the CSS (or as I prefer, SCSS):

@-webkit-keyframes quickFlash {
  0% {
    background-color: yellow;
    opacity: 1;
  }
  100% {
    background-color: inherit;
  }
}

.quickFlash {
  //https://stackoverflow.com/questions/16791851/a-flash-of-color-using-pure-css-transitions
  -webkit-animation-name: quickFlash;
  -webkit-animation-duration: 1900ms;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -moz-animation-name: quickFlash;
  -moz-animation-duration: 1900ms;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease;
}

And I also found it useful to be able to have the class remove itself at the end of the animation (so that I could later add it again if I wanted to see the animations again):

function flashYellow(element) {
  element
    .addClass("quickFlash")
    .on(
      "webkitAnimationEnd oanimationend msAnimationEnd animationend",
      function() {
        console.log("animationend");
        $(this)
          .delay(500)// Wait for milliseconds.
          .queue(function() {            
            console.log("end of delay");
            $(this)
              .removeClass("quickFlash")
              .dequeue();
          });
      }
    );
}

Answer 4

This would be a CSS-only version to have a yellow flash while clicking without any javascript :-)

a {
  border-radius: 0.8em;
  padding: 1em;
  margin: 1em;
  cursor: pointer;
}
.copy {
  background-color: inherit;
  transition: background-color 1.3s;
}
.copy:active {
  background-color: yellow;
  transition: background-color 0s;
}

<a class="copy">copy</a>