为什么CSS3动画不能在轮廓上起作用而默认设置为none？ [英] Why don't CSS3 animations work on outline with default none?

问题描述

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

  @keyframes hilite {
 0％{
 background-color：透明； 
轮廓：#ffffff固定10像素； 
} 
 20％{
 background-color：＃F6F6BC; 
轮廓：＃F6F6BC实心10px； 
} 
 100％{
 background-color：透明； 
轮廓：#ffffff固定10像素； 
} 
} 
  

但是现在我很害怕看到背景动画在每种情况下均会触发，但轮廓动画仅在元素具有轮廓样式值时有效（无作用，当背景都无法避免动画时无效）。

您可以在此处看到它。

我不想修复它，它已经修复了，但是了解它-对我来说似乎是不合逻辑的。

很多谢意。

解决方案

边框和轮廓样式无法设置动画；这是设计。当您尝试从 none 更改为 solid 的动画时，如小提琴中最后一个框所示，会发生什么情况是它会立即切换为 solid ，这会导致它在动画为所定义的颜色之前暂时显示为黑色轮廓，因此它不会

如果您需要从不可见的轮廓到可见的轮廓的平滑动画，就可以从没有轮廓的动画。 ，在颜色值和透明之间（而不是 outline-style ）在 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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！