javascript - 立即反转 CSS3 动画

Question

当我将 .shown 类添加到我的 #overlay 时，我希望不透明度淡入 2 秒，然后立即反转并淡出 2 秒，创建一种“闪烁”效果。

我尝试只删除该类，但根本没有显示任何动画。这是我的示例标记/CSS:

HTML:

<div id="outer">
    This is some text
    <div id="overlay"></div>
</div>

CSS:

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

尝试的 JS:

// Wait 2 seconds from page load...
setTimeout(function() {
    // Add shown class to trigger animation
    document.getElementById("overlay").classList.add("shown");
    // Want to remove the class and hoped this would reverse the animation...
    // it doesn't
    document.getElementById("overlay").classList.remove("shown");
}, 2000);

jsFiddle

Answer 1

在关键帧上使用css动画

@keyframes myFlash
{
0%   {opacity:0;}
50%  {opacity:0.3;}
100% {opacity:0;}
}

@-webkit-keyframes myFlash /* Safari and Chrome */
{
0%   {opacity:0;}
50%  {opacity:0.3;}
100% {opacity:0;}
}

#overlay {
    ...
    opacity: 0;
}
#overlay.shown {
animation:myFlash 2s;
-webkit-animation:myFlash 2s; /* Safari and Chrome */
}