2

我已经到了这一点，我试图在一个我不能移动或修改其边界的元素上做一个 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;
    }
}

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

你可以在这里看到它。

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

提前非常感谢。

4

1 回答 1

10

边框和轮廓样式不能动画；这是设计使然。当您尝试对从none到的更改进行动画处理时solid，如小提琴中的最后一个框所示，会发生什么情况是它会solid 立即切换到，这会导致它在动画到定义的颜色之前暂时显示为黑色轮廓，所以它不会从这个意义上说，实际上并没有从没有轮廓到实体轮廓的动画。

如果您需要从不可见轮廓到可见轮廓的平滑动画，请outline-color在颜色值之间设置动画，transparent而不是在andoutline-style之间。我看到您正在使用代替，只要容器的背景也是白色的，它也可以工作。solidnone#fffffftransparent

于 2013-01-17T19:33:05.883 回答