Search code examples
css-transitionscsspseudo-class

CSS3 transition on box-shadow at :active

Is it possible to use :active for animating a change in box-shadow with duration and delay.

I have a change in color on :hover with duration. Apparently the same approach doesn't work for box-shadow.

I tried add class through js. I tried setting duration in the :active class and in the main class. I tried transition: box shadow 1s transition-duration: 1s. And some more stuff.

the full code is at codepen http://cdpn.io/pKJmC

So, any ideas?

thanks

Solution

  • You need to give it a default state to transition from. You already have box-shadow on the circles but no inset box-shadow. Add an inset box-shadow set to zero on your circles:

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