Html 颜色的“闪光”，使用纯 css 过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16791851/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
A "flash" of color, using pure css transitions
提问by zmanc
I am trying to give users a "flash" of color when there is a click event. I can get the color to appear in a pleasing fashion using a transition, however I want the color to disappear after .5s, without removing the "active" class. One requirement though is that I cannot use jQuery animations and this must be done in CSS.
当有点击事件时，我试图给用户一个“闪光”的颜色。我可以使用过渡让颜色以令人愉悦的方式出现，但是我希望颜色在 0.5 秒后消失，而不删除“活动”类。但一个要求是我不能使用 jQuery 动画，这必须在 CSS 中完成。
Below is the css I am using currently.
下面是我目前使用的 css。
.active{
background-color: yellow;
-webkit-transition: background-color .5s linear;
transition: background-color .5s linear;
}
I tried specifying a second value however I do not think this is valid markup as it does not work.
我尝试指定第二个值，但是我认为这不是有效的标记，因为它不起作用。
.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;
}
回答by Rohith
I think this is what you are looking for. The sample is not exact.
我想这就是你要找的。样本不准确。
$("#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>Hope you will get the solution you are looking for from this.
希望您能从中得到您正在寻找的解决方案。
EDIT :
编辑 ：
I have edited your JS Bin.
This will be what you are exactly looking for
我已经编辑了你的 JS Bin。
这将是您正在寻找的
回答by PointZeroTwo
I came up with the following based on my own needs. I wanted a flash of color to confirm a user action. The text flashes once when you click on it. It does use jquery to set the class, but not for the animation.
我根据自己的需要提出了以下建议。我想要一个闪光的颜色来确认用户操作。单击文本时，文本会闪烁一次。它确实使用 jquery 来设置类，但不是用于动画。
Html:
网址：
<span style="background:lightgray" id="id">Click to flash</span>
Js:
JS：
$('#id').click(function() {
$('#id').addClass('flash');
setTimeout(function() {
$('#id').removeClass('flash');
}, 500);
});
Css:
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; }
}
回答by Ryan
Impressed by Rohith's answer, here is my own JSFiddle demo(with added functionality)
Rohith 的回答给我留下了深刻的印象，这是我自己的 JSFiddle 演示（具有附加功能）
The main part is the CSS (or as I prefer, SCSS):
主要部分是 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;
}
And I also found it useful to be able to have the class remove itself at the end of the animation (so that I could later add it again if I wanted to see the animations again):
而且我还发现能够让类在动画结束时自行删除是很有用的（这样如果我想再次看到动画，我以后可以再次添加它）：
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();
});
}
);
}
