CSS3的框影过渡在:active

Question

是否可以使用:active来动画化带有持续时间和延迟的box-shadow ?

我改变了hover的颜色和持续时间。显然，同样的方法不适用于box-shadow。

我尝试通过js添加类。我尝试在活动类和主类中设置持续时间。我试了transition: box shadow 1s, transition-duration: 1s。还有更多的东西

完整的代码在codepen http://cdpn.io/pKJmC

有什么想法吗?

谢谢

Answer 1

您需要给它一个默认状态来进行转换。圆圈上已经有box-shadow，但没有插入 box-shadow。在你的圆圈上添加一个插入框阴影设置为0:

.ball1,
.ball2,
.ball3 {
    box-shadow: inset 0 0 0 #222, 0px 10px 20px -10px #222;
}

Answer 2

首先，属性名是box-shadow。你的问题中没有连字符。

还有一件事，你不能转换到auto属性。所以你需要定义一个box-shadow: none;在你的默认状态下，如果你想让它工作