CSS3 过渡想要添加颜色并将其淡出

Question

我想让DIV背景（没有背景颜色）闪烁红色，然后再次缓和为空白。 现在我已经使用 JS 将一个新的 CLASS（添加红色）添加到有问题的 DIV 中，并使用 CSS3 为背景颜色添加缓动。 但它缓和了它，我想要的是它变成红色然后缓和出来。我想我可以通过使用JS在延迟后添加多个CLass来做到这一点。但是CSS3可以完全用于做到这一点吗？

Answer 1

如果你想要像突出显示这样的东西，你可能想使用 CSS3 动画。它们在较旧的浏览器中不受支持。检查犬类。

单击链接时将调用突出显示。这是CSS（没有供应商前缀）：

@keyframes highlight {
    0% {
        background: red
    }
    100% {
        background: none;
    }
}
#highlight:target {
    animation: highlight 1s;
}

<div id="highlight"><a href="#highlight">Highlight</a></div>

Answer 2

一种方法是使用 jQuery UI animate 方法，该方法扩展了"普通"jQuery animate（） 以影响背景颜色等内容。

像这样的过渡在 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;
}

当用户将鼠标悬停在 Div 上时，这将淡化颜色，并在鼠标退出时将其淡化，超过 0.5 秒。有关浏览器支持的详细信息，请参阅此处的"css3 转换"：http://www.html5rocks.com/en/features/presentation