Question

我正在努力更新传统的html / css应用程序，其中很多功能都依赖于在正确的时间闪烁的div。目前，通过在color的函数中添加和删除具有不同background-color和setTimeout的类来完成闪烁。它目前看起来像这样：

.attention {
    background-color: red;
    color: white;
}

每隔0.5秒切换一次setTimeout。这是非常无效的。我想用动画代替它，动画本身很简单：

@keyframes flashing-red {
    50% {
        background-color: red;
        color: white;
    }
}

.attention {
    animation: flashing-red 1s step(1) infinite;
}

这完全正常，但是有一个复杂因素，div包含其他元素，例如带有图标的孩子div。具体来说，HTML看起来像这样：

<div class="block">
    <div class="block-icon"></div>
</div>

icon的CSS定义如下：

.block .block-icon {
    background-image: url(sprites.png) no-repeat 0 -110px;
}

.block.attention .block-icon {
    background-image: url(sprites.png) no-repeat 0 -130px;
}

如您所见，添加attention时图标会发生变化。通过添加 - 删除类attention实现闪烁时，图标随背景颜色一起变化。然而，对于动画，背景正在改变，而课程总是在那里。因此，图标不会发生变化。

如何根据背景颜色更改图标？当然，我可以定义自己的关键帧动画，但是除了这个图标之外还有更多元素，我担心多个动画不会完全同步。

我真的不想保留定时器，因为效果在整个应用程序中使用，有时我最多有100个超时活动并且每半秒触发一次。

欢迎任何想法。

CSS动画和子元素

0 个答案: