html - 未知背景颜色的 CSS 背景颜色脉冲动画

Question

我有一个 div 列表，其背景颜色由 knockout.js observable 确定。第一个 div 的背景颜色应该略微闪烁以表明这是事件元素。我用 css 和关键帧创建了一个脉冲动画，但这似乎只适用于“编译时”已知的固定颜色。我能以某种方式让它更有活力吗？我已经尝试使用 inherit 关键字，但这不起作用

<div class="cch-current-storage" data-bind="style: { 'background-color': storageType.color }">Bla</div>
<div data-bind="style: { 'background-color': storageType.color }">Next</div>

<style>
.cch-current-storage {
      animation-name: color;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-direction:alternate-reverse;
      animation-timing-function:ease
}

@@keyframes color {
  from {background-color: red;}
  to {background-color: inherit;}
}
</style>

Answer 1

首先有一个错字……css-current-storage vs .ccs-current-storage

我做了 fiddle ，你可以看这里 ( https://jsfiddle.net/z9modqt4/ )

CSS

div{
  width: 100px;
  height: 100px;
}
.css-current-storage {
      animation-name: color;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
      animation-timing-function: ease;
}


@keyframes color {
  to {
    background-color: blue;
    }
}

html

<div class="css-current-storage" style='background-color: yellow' >Bla</div>

如果我在 from 中留下空白(完全删除 from)，它似乎可以工作

它违反直觉，因为它是从 to 到 from 工作的。所以它在其他方向上起作用(因为 animation-direction: alternate-reverse 就像 Temani 在评论中说的那样)