Smooth CSS Transitions On Inset Box Shadows
**UPDATE: **It appears that Firefox 5 and Chrome 12.0 have eliminated the issue of the jumping shadow transition. Safari still has the issue and I haven’t testing with IE or Opera.
If you’ve ever tried to use a CSS transitions on an inset box shadow the result probably wasn’t what you expected. If you are transitioning from no box shadow to an inset box shadow, the transition takes place outside of the element and then jumps inside after the transition is complete. It’s hard to describe.
The Solution
If you set an invisible inset box shadow on the element to begin with, the transition have the desired effect. You can set an invisible box shadow by using rgba and setting alpha to 0, or by setting the box-shadow’s color to transparent.
.box { box-shadow: 0 0 0 transparent inset; }
.box { box-shadow: 0 0 0 rgba(0, 0, 0, 0) inset; }
Note: It makes no different whether you use rgba or transparent. I always go with transparent just because that seems more logical when reading it back than rgba.
Other Notes
You might think that if you set the transparent box shadow to a specific color that it would transition from that color to the desired color, but in my tests it hasn’t made a difference. Whether I am transitioning from red (rgba(255, 0, 0, 0)) to blue (rgba(0, 0, 255, 1)) or just transparent to blue I get the same effect.
One other important note is that the spread of your transparent box shadow makes a difference. If you set it to 0 you will get an effect where the shadow “grows” inward from the edge of the element. However, if you set the spread to the same value that you are transitioning to you will only see the shadow just fade in.
Source: