css-transitions - 盒子阴影上的 CSS3 过渡：active

Question

是否可以使用 :active 为具有持续时间和延迟的 box-shadow 变化设置动画。

我在 :hover 上的颜色随着持续时间发生了变化。显然，相同的方法不适用于 box-shadow。

我尝试通过js添加类。我尝试在 :active 类和主类中设置持续时间。我试过了transition: box shadow 1s transition-duration: 1s。还有一些东西。

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

那么，有什么想法吗？

谢谢

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

首先，属性名是box-shadow。在您的问题中，您在没有连字符的情况下编写了它。

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

2 回答 2