Border and outline styles cannot be animated; this is by design. When you attempt to animate a change from none
to solid
, as shown in the last box in your fiddle, what happens is that it switches to solid
immediately, which causes it to display as a black outline momentarily before animating to the color that's defined, so it doesn't actually animate from no outline to a solid outline in that sense.
If you need a smooth animation from an invisible outline to a visible outline, animate outline-color
between a color value and transparent
instead of outline-style
between solid
and none
. I see that you're using #ffffff
in place of transparent
, which also works provided the background of the container is also white.