为什么CSS3动画不能在大纲上工作，默认情况下没有？

Question

我已经到了这一点，我正在尝试对一个我无法移动或修改其边界的元素进行hilite动画，因此我使用了除了背景颜色之外的轮廓来制作动画区域大于元素本身（这是一个样本）：

@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;
    }
}

但是现在我很惊讶看到背景动画在每种情况下都会触发，但是轮廓动画只有在元素具有轮廓样式值时才会起作用（没有一个不起作用，当背景无法避免动画时）。

你可以看到它here。

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

提前多多感谢。

Answer 1

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

如果您需要从不可见轮廓到可见轮廓的平滑动画，请在outline-color和{{之间的颜色值与transparent而不是outline-style之间设置solid的动画。 1}}。我看到您使用none代替#ffffff，如果容器的背景也是白色，也可以使用transparent。