重置背景色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或透明）上保持狀態。 當前，一旦動畫完成，動畫元素就會恢復為其原始狀態（ 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> 

Answer 2

我認為在您的情況下，更改模式會更容易。

初始顏色為白色，然后使其閃爍為綠色，然后再次重置為所需的顏色（白色或透明）。 通過自定義定義的關鍵幀輕松解決。 （看小提琴）

 #divtoBlink{
    background: #fff;
    animation-duration: 1000ms;   
    animation-name: blink;
    animation-iteration-count: 1;
    animation-direction: alternate;      
  }

  @keyframes blink {
    0%   { background: #008800;}
    50% { background: #fff;} // optional sugar any color between..
    100% { background: #fff; }
  }

http://jsfiddle.net/a2pg246h/