css-transitions - :active 框阴影上的 CSS3 过渡

Question

是否可以使用 :active 来为带有持续时间和延迟的盒子阴影的变化设置动画。

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

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

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

那么，有什么想法吗？

谢谢

Answer 1

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

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