我可以“反转”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 on CSS3 Animation

上查看此示例

Answer 2

javascript将类应用于元素（无jquery）：

document.getElementById（“id”）。className =“newclass”;

Answer 3

Here对你来说是个傻瓜。应该做你需要的 - 只需点击黑色矩形。