html - 重置背景颜色 CSS

Question

我正在开发一个元素，我应该让 div 的特定部分闪烁(或只闪烁一次)

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 或透明的)。目前，一旦动画完成，动画元素就会恢复到其原始状态(背景:#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>