为什么CSS3动画不能在轮廓上起作用而默认设置为none？

问题描述

我已经到了要在无法移动或修改其边界的元素上进行Hilite动画的程度，所以除了背景颜色之外，我还使用了轮廓来制作动画比元素本身大的区域（这里是一个示例）：

 ）在 outline-color 之间设置动画。 code>介于 solid 和 none 之间。我发现您使用的是 #ffffff 代替 transparent ，如果容器的背景是也是白色的。
 
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.
 解决方案 
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.
                        
这篇关于为什么CSS3动画不能在轮廓上起作用而默认设置为none？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！