javascript - Immediately reverse CSS3 animation -

when add .shown class #overlay opacity fade in 2secs, reverse , fade out 2 seconds, creating sort of "flashing" effect.

i tried removing class doesn't show animation @ all. sample markup/css:

html:

<div id="outer">     text     <div id="overlay"></div> </div> 

css:

#overlay {     ...     opacity: 0;     transition: opacity 2s ease-in-out; } #overlay.shown {     opacity: 0.3; } 

attemped js:

// wait 2 seconds page load... settimeout(function() {     // add shown class trigger animation     document.getelementbyid("overlay").classlist.add("shown");     // want remove class , hoped reverse animation...     // doesn't     document.getelementbyid("overlay").classlist.remove("shown"); }, 2000); 

jsfiddle

use css animation keyframes

@keyframes myflash { 0%   {opacity:0;} 50%  {opacity:0.3;} 100% {opacity:0;} }  @-webkit-keyframes myflash /* safari , chrome */ { 0%   {opacity:0;} 50%  {opacity:0.3;} 100% {opacity:0;} }  #overlay {     ...     opacity: 0; } #overlay.shown { animation:myflash 2s; -webkit-animation:myflash 2s; /* safari , chrome */ }