Question

我有一个div列表，其背景颜色由可观察的knockout.js确定。第一个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与.ccs-current-storage

我摆弄小提琴，您可以在这里（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在评论中所说的那样）

CSS背景色脉冲动画，以获取未知的背景色

1 个答案: