为什么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;
    }
}

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

你可以在这里看到它.

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

非常感谢提前.

Answer 1

边框和轮廓样式无法设置动画; 这是设计的.当您尝试动画从变化none到solid,如在你的提琴最后一个方框,什么情况是,它切换到solid 马上,这导致它暂时动画到的已定义的颜色前显示为黑色的轮廓,所以它不在这个意义上,实际上从无轮廓动画到实线轮廓.

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