重置背景颜色 CSS

Question

我正在开发一个项目，我应该在其中制作 div flash 的特定部分，（或只闪烁一次）

HTML ：

<p  style="color:#f47321; font-size:16px; font-weight:bold;" id="divtoBlink" >Current Price</p>

和 CSS

<style>
  #divtoBlink{
    background: #008800;
    animation-duration: 1000ms;   
    animation-name: blink;
    animation-iteration-count: 1;
    animation-direction: alternate;      
  }

  @keyframes blink {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }
</style>

它闪烁，颜色变为绿色。但颜色保持绿色。我想background: #008800;再次将 重置为白色或透明。是否有我可以使用的属性或调整？任何帮助表示赞赏。

Answer 1

我认为您需要的只是background在眨眼后变得透明并使文本保持可见。如果是这种情况，请使用以下代码段。当opacity动画从 1 到 0 时，整个元素及其内容将变得不可见。相反，动画background应该就足够了。

#divtoBlink {
  background: #008800;
  animation-duration: 1000ms;
  animation-name: blink;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}
@keyframes blink {
  from {
    background: #008800;
  }
  to {
    background: transparent;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<p style="color:#f47321; font-size:16px; font-weight:bold;" id="divtoBlink">Current Price</p>

原答案：

所需要做的就是添加，animation-fill-mode: forwards以便元素保持其最终关键帧（opacity: 0或透明）的状态。目前，background: #008800一旦动画完成，动画元素就会恢复到其原始状态 ( )。

#divtoBlink {
  background: #008800;
  animation-duration: 1000ms;
  animation-name: blink;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}
@keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<p style="color:#f47321; font-size:16px; font-weight:bold;" id="divtoBlink">Current Price</p>