在旧颜色和新颜色之间闪烁 CSS 颜色

Question

假设我有一个div，颜色添加了background-color:red or green。我想让这个闪光灯变成另一种颜色，其中 'non-flash' 是以前的颜色值。

HTML
<div class='red make-green flash'></div>

LESS
.red{
  background-color:red;
  .make-green{
    background-color:green;
  }
}
.flash{
   animation: flash 2s infinite;
}
@keyframes flash {
 0%{
    background-color:blue;
 }
 50%{
    background-color:            ;<-- what goes here?
 }
 100%{
    background-color:blue;
 }
}

如果我们删除 .make-green，div 应该闪烁 red | blue，如果删除 make-green，它将闪烁 green | blue。

Answer 1

您可以使用 css 变量，如果您同意 non-perfect browser support。

:root {
  --bg: red;
}

.red {
  height: 100px;
  width: 100px;
  background-color: var(--bg);
}

.make-green {
  --bg: green;
}

.flash {
  animation: color 2s infinite;
}

@keyframes color {
  0% {
    background-color: blue;
  }
  50% {
    background-color: var(--bg);
  }
  100% {
    background-color: blue;
  }
}

<div class='red make-green flash'></div>
<div class='red flash'></div>

Answer 2

这是另一个没有 CSS 变量的想法，您可以在其中稍微更改动画以考虑元素的初始状态。如果不指定 100% 状态，浏览器将自动考虑元素内指定的值。

.red {
  background-color: red;
}

.make-green {
  background-color: green;
}


.flash {
  animation: flashE 1s infinite alternate;
}

@keyframes flashE {
  0% {
    background-color: blue;
  }
}

<div class='red flash'>Some text</div>

<div class='red make-green flash'>Some text</div>

在旧颜色和新颜色之间闪烁 CSS 颜色

Flash CSS colour between previous colour and new colour

html

css

less