Question

我正在尝试使图像在页面加载时渐显。我创建了一个主要实现我的目的的示例：

.fadeFromBlack {
    /* animation: FadeFromBlack steps(16) 0.5333333333s; */
    animation: FadeFromBlack 5.3333333333s;
}
@keyframes FadeFromBlack {
    from {filter: brightness(0%)}
    to {filter: brightness(100%)}
}

<div class="fadeFromBlack"><img src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" style="position: absolute; left: 0; top: 0;" /></div>

但是，有一个问题。在动画期间，图像未按预期放置；它遵循父div元素的默认位置。只有在动画完成后，它才能绝对正确定位。

我观察到了触发此问题所需的两个其他条件：

效果是从父标记继承的。如果将效果直接应用于img，则不会发生此问题。
动画将应用filter中的@keyframes属性。并非所有属性都会导致此问题。例如，opacity属性按预期尊重位置：

.fadeFromBlack {
    /* animation: FadeFromBlack steps(16) 0.5333333333s; */
    animation: FadeFromBlack 5.3333333333s;
}
@keyframes FadeFromBlack {
    from {opacity: 0}
    to {opacity: 1}
}

<div class="fadeFromBlack"><img src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" style="position: absolute; left: 0; top: 0;" /></div>

我观察到这既是Firefox又是Chrome，因此我认为这不是浏览器特定的错误。作为参考，我在Windows 8上运行Firefox 64.0.2，并在Chrome 71上对此进行了测试。

为什么动画滤镜效果不尊重子元素的绝对位置？

0 个答案: