在原始颜色和设置的颜色之间设置背景动画
在原始颜色和设置的颜色之间设置背景动画
提问于 2018-06-10 03:09:40
我有随机初始背景颜色的HTML元素。
我需要动画的选定元素的背景颜色之间的原始(初始)和新的。
我一直在尝试使用：
@keyframes blink-red {
0% { background-color: initial; color: initial; }
100% { background-color: red; color: #000; }
}但它似乎忽略了“初始”设置。
我知道这可以通过探测初始颜色来用JavaScript完成，但我喜欢用纯css来做。
代码笔：https://codepen.io/kheim/pen/GGrMoj
谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-10 03:26:42
可以省略具有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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50777621
复制相关文章
相似问题