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
Post a Comment