在原始颜色和设置颜色之间设置动画背景

Question

我有带有随机初始背景颜色的 HTML 元素。

我需要在原始（初始）和新元素之间对选定元素的背景颜色进行动画处理。

我一直在尝试使用：

@keyframes blink-red {    
    0% { background-color: initial; color: initial; }
    100% { background-color: red; color: #000; }
}

但它似乎忽略了“初始”设置。

我知道可以用 JavaScript 通过探测初始颜色来完成，但我很想用纯 css 来完成。

代码笔： https: //codepen.io/kheim/pen/GGrMoj

谢谢！

Answer 1

您可以使用以下initial值省略关键帧：

.animate {
  padding: 1cm;
  animation: blink 3s infinite;
}

@keyframes blink {
  50% {
    background: green;
    color: #000;
  }
}

<div style="background: blue; color:#fff" class="animate">
Blue background
</div>
<div style="background: red; color:#fff" class="animate">
Blue background
</div>