Ein “Farbblitz” mit reinen CSS-Übergängen

Ich versuche, Benutzern einen “Farbblitz” zu geben, wenn ein Klickereignis auftritt. Ich kann die Farbe mit einem Übergang auf angenehme Weise erscheinen lassen, aber ich möchte, dass die Farbe nach 0,5 Sekunden verschwindet, ohne die “aktive” Klasse zu entfernen. Eine Voraussetzung ist jedoch, dass ich keine jQuery-Animationen verwenden kann und dies in CSS erfolgen muss.

Unten ist das CSS, das ich derzeit verwende.

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

Ich habe versucht, einen zweiten Wert anzugeben, aber ich glaube nicht, dass dies ein gültiges Markup ist, da es nicht funktioniert.

.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

Ich denke, das ist, was Sie suchen. Das Muster ist nicht exakt.

$("#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>

Ich hoffe, Sie erhalten die Lösung, nach der Sie suchen.

BEARBEITEN :

Ich habe Ihre JS Bin bearbeitet.

Das wird genau das sein, wonach Sie suchen

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

Folgendes habe ich mir aufgrund meiner eigenen Bedürfnisse ausgedacht. Ich wollte einen Farbblitz, um eine Benutzeraktion zu bestätigen. Der Text blinkt einmal, wenn Sie darauf klicken. Es verwendet jquery, um die Klasse festzulegen, aber nicht für die 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; }
}

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

Beeindruckt von Rohiths Antwort, hier ist meine eigene JSFiddle-Demo (mit zusätzlicher Funktionalität)

Der Hauptteil ist das CSS (oder wie ich es bevorzuge, 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;
}

Und ich fand es auch nützlich, die Klasse am Ende der Animation entfernen zu lassen (damit ich sie später wieder hinzufügen könnte, wenn ich die Animationen noch einmal sehen wollte):

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();
          });
      }
    );
}