Why don't CSS3 animations work on outline with default none?

Question

I've got to this point in which I'm trying to do a hilite animation on an element which I can't move or modify its boundings, so i used an outline in addition to its background color to have an animation area bigger than the element itself (here's a sample):

@keyframes hilite {
    0% {
        background-color: transparent;
        outline: #ffffff solid 10px;
    }
    20% {
        background-color: #F6F6BC;
        outline: #F6F6BC solid 10px;
    }
    100% {
        background-color: transparent;
        outline: #ffffff solid 10px;
    }
}

But now i'm freaking seeing that the background animation triggers in every case, but the outline animation works only when the element has an outline style value (none doesn't work, when background none doesn't avoid animations).

You can see it here.

I don't want to fix it, it's already fixed, but understand it - seems illogical to me.

Lots of thanks in advance.

Answer 1

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.