重置背景顏色CSS

我開發我在哪裏應該使DIV閃光的一個特定部分（或閃爍一次）項目重置背景顏色CSS

的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;重置爲白色或透明。有沒有可用的財產或調整？任何幫助表示讚賞。

來源

2015-10-05 Faizan Shah

爲什麼不使用jQuery的？ –

@MuhammadFarrukhFaizy：因爲可以在不使用jQuery的情況下處理這些事情。 – Harry

@MuhammadFarrukhFaizy爲什麼不使用匯編程序？是的，因爲使用Asembler完成這樣的任務非常複雜。或者是一種腳本語言。一個完整的應用程序框架（如jQuery）... – feeela

我認爲你所需要的僅僅是在眨眼後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>

來源

2015-10-05 12:04:15 Harry

嗯，閃爍後，它淡化了div標籤內的所有內容。 –

@FaizanShah：是的，這不是你想要的嗎？如果沒有，請你澄清更多。（*編輯：*我認爲你可能只是在尋找背景變得透明，但內容是可見的。如果是的話，請現在回答我的答案中的第一個片段。） – Harry

你看這是一個應該說的標籤當前價格。應用css，顏色變爲綠色，但保持綠色。應用你的方法，它消除了綠色和當前價格。 –

我想在你的情況很容易改變的格局。

初始顏色爲白色，然後讓它閃爍爲綠色並再次重置爲您希望的顏色（白色或透明）。通過自定義關鍵幀輕鬆解決。（看小提琴）

#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/

來源

2015-10-05 12:14:46

重置背景顏色CSS

回答

相關問題