使用纯css过渡的"闪光"颜色

Question

当有点击事件时,我试图给用户一个"闪光"的颜色.我可以使用过渡使颜色以令人愉悦的方式出现,但我希望颜色在.5s后消失,而不删除"活动"类.但有一个要求是我不能使用jQuery动画,这必须在CSS中完成.

下面是我目前正在使用的CSS.

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

我尝试指定第二个值,但我不认为这是有效的标记,因为它不起作用.

.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

我想这就是你要找的东西.样本不准确.

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

希望您能从中获得您正在寻找的解决方案.

编辑:

我编辑了你的JS Bin.

这将是您正在寻找的

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

Answer 2

我根据自己的需要提出了以下建议.我想要一个颜色的闪光来确认用户的动作.单击它时文本会闪烁一次.它确实使用jquery来设置类,但不使用动画.

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

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