css - Animate background color to different colors -


how can animate ground color of div lightest orange color darkest red color, , (which should make glow effect)?

i created jsfiddle changes colors light grey (static set) red. far got.

i did found few questions regarding animating colors, nothing multiple colors.

any appreciated.

add css div. http://jsfiddle.net/nillervision/a4elz/

.test {     overflow: hidden;     text-align: center;     font-family: sans-serif;     font-size: 40px;     line-height: 3;         -webkit-animation: glow linear 1s infinite;      animation: glow linear 1s infinite; }  @-webkit-keyframes glow {      0% { background-color:red; }     50% { background-color:orange; }     100% { background-color:red; }   }  @keyframes glow {      0% { background-color:red; }     50% { background-color:orange; }     100% { background-color:red; }  } 

if want animation run once on pageload remove "infinite" value. if want effect happen on hover use css transitions instead.


Comments

Popular posts from this blog

user interface - How to replace the Python logo in a Tkinter-based Python GUI app? -

objective c - Greedy NSProgressIndicator Allocation -

how to set an OCR language in Google Drive -