颜色的“闪光”，使用纯​​ css 过渡

Question

当有点击事件时，我试图给用户一个“闪光”的颜色。我可以使用过渡让颜色以令人愉悦的方式出现，但是我希望颜色在 0.5 秒后消失，而不删除“活动”类。但一个要求是我不能使用 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/

Answer 3

对 Rohith 的回答印象深刻，这里是 my own JSFiddle demo（添加了功能）

主要部分是 CSS（或者我更喜欢 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;
}

而且我还发现能够让类在动画结束时自行删除很有用（这样以后如果我想再次查看动画，我可以再次添加它）：

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