我可以"invert" CSS 过渡吗？

Question

这就是我想做的：

这是一个测验，有一个问题和几个答案。用户选择 1 个答案，然后显示正确答案是什么。

我希望正确答案按钮基本上"亮起"，然后淡出正常。

因此，我可以为我的元素提供一个简单的样式，然后添加一个带有白框阴影的类。我可以在两者之间过渡。

但是我想添加类，然后元素获得完整的白框阴影，然后淡出到正常状态。

这可能吗？

Answer 1

你需要

使用@keyframes来做纯CSS3

@keyframes animation_name{
  0%   {background: color1;}
  50%  {background: color2;}
  100% {background: color1;}
}

以及您想要动画的元素

css_selector{
   animation: animation_name 5s;
   animation-iteration-count:infinite;
}

并且不要忘记添加浏览器特定的-moz，-webkit前缀。

在 w3schools 上查看此示例 CSS3 Animation

Answer 2

JavaScript 将类应用到元素（无 jquery）：

document.getElementById（"id"）.className = "newclass";

Answer 3

这里有一个给你的jsfiddle。应该做你需要的 - 只需单击黑色矩形。