CSS CSS3 过渡想要添加颜色并将其淡化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10072993/
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
CSS3 transitions want to add a colour and fade it away
提问by Purplemonkey
I want to make a DIV background (which doesn't have a background color) flash red then ease out to blank again. now I have used JS to add a new CLASS (which adds the red) to the DIV in question and CSS3 to add an easing to the background color. but it eases it IN, what I want is it to go RED then ease out. I guess I could do this by using JS to add multiple CLasss after a delay. but can CSS3 be used to do this entirely?
我想让一个 DIV 背景（没有背景颜色）闪烁红色，然后再次变白。现在我已经使用 JS 向有问题的 DIV 添加了一个新的 CLASS（添加了红色），并使用 CSS3 添加了背景色的缓动。但它可以缓解它，我想要的是它变红然后缓解。我想我可以通过使用 JS 在延迟后添加多个 CLass 来做到这一点。但是可以完全使用 CSS3 来做到这一点吗？
回答by drublic
If you want something like a highlighting you may want to use CSS3 animations. They are not supported in older browsers. Check caniusefor this.
如果您想要突出显示之类的东西，您可能需要使用 CSS3 动画。较旧的浏览器不支持它们。为此检查caniuse。
I've created a short example over here.
我在这里创建了一个简短的示例。
The highlight is called on clicking the link. Here is the CSS (without vendor-prefixes):
单击链接时会调用突出显示。这是 CSS（没有供应商前缀）：
@keyframes highlight {
0% {
background: red
}
100% {
background: none;
}
}
#highlight:target {
animation: highlight 1s;
}
回答by Daniel Hallqvist
One way to do it is to use the jQuery UI animate method, which extends the "normal" jQuery animate() to affect things like background-color.
一种方法是使用 jQuery UI animate 方法，该方法扩展了“普通”jQuery animate() 以影响诸如背景颜色之类的东西。
Transitions like this is possible in css3 to, but obviously with not as wide browser support.
像这样的转换在 css3 中是可能的，但显然没有那么广泛的浏览器支持。
#maDiv {
-webkit-transition:background-color 0.5s linear;
-moz-transition: background-color 0.5s linear;
-o-transition: background-color 0.5s linear;
height: 20px;
width: 20px;
background:#000;
}
#maDiv:hover {
background: #ff0;
}
That will fade the color when the user hovers the Div, and fade it back when mouse is out, over 0.5 seconds. For browser support details, see "css3 transition" here: http://www.html5rocks.com/en/features/presentation
这将在用户悬停 Div 时淡出颜色，并在鼠标移开时淡出 0.5 秒。有关浏览器支持的详细信息，请参阅此处的“css3 转换”：http://www.html5rocks.com/en/features/presentation
