立即反转 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 */
}

Answer 2

看起来你可以在第一个动画完成后使用第二个超时..

// Wait 2 seconds from page load...
setTimeout(function() {
    // Animate Forward
    document.getElementById("overlay").classList.add("shown");
    setTimeout(function(){
        // Animate Back
        document.getElementById("overlay").classList.remove("shown");
    },2000);
}, 2000);

Answer 3

为了实现您的输出，我做了很多更改，请检查以下代码

Your css
#outer {
    width: 100px;
    height: 100px;
    position: relative;
}
#overlay {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #336699;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}
#overlay.shown {
    display: block;
    opacity: 0.5;
}

你的js

setTimeout(function() {
    $("#overlay").addClass("shown");
   var def = $('#overlay').promise();
    def.done(
       function () {
          $('body').stop().delay(5000).queue(function(){
        $("#overlay").removeClass("shown");
    });

    });


}, 2000);

第一个和第二个之间没有延迟，所以它将如何显示你所做的动画

请查看工作演示.....Demo