盒子阴影上的 CSS3 过渡：active答案

【问题标题】：CSS3 transition on box-shadow at :active盒子阴影上的 CSS3 过渡：active
【发布时间】：2013-05-19 20:51:09
【问题描述】：

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

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

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

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

那么，有什么想法吗？

谢谢

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：