我有带有随机初始背景颜色的 HTML 元素。
我需要在原始(初始)和新元素之间设置所选元素的背景颜色动画。
我一直在尝试使用:
@keyframes blink-red {
0% { background-color: initial; color: initial; }
100% { background-color: red; color: #000; }
}
但它似乎忽略了“初始”设置。
我知道这可以通过探测初始颜色用 JavaScript 来完成,但我更愿意用纯 css 来完成。
码笔:https://codepen.io/kheim/pen/GGrMoj
谢谢!
最佳答案
您可以省略具有初始
值的关键帧:
.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>
关于css - 在原始颜色和设置颜色之间设置动画背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50777621/