This is how you add a glowing effect to a background, it also works with “color” and not just the “background-color” attribute.
label { background-color: glow; color: #CCFF00; -webkit-animation: 4s glow-load 4s infinite alternate; -moz-animation: 4s glow-load 4s infinite alternate; -o-animation: 4s glow-load 4s infinite alternate; animation: 4s glow-load 4s infinite alternate; }
The above gives the duration for the animation sequence “glow-load”.
@-webkit-keyframes glow-load { from { border-color: #EEF6F2;} 25% { border-color: #383434; } 50% { border-color: #FF5000; } 75% { border-color: #CCFF00; } to { border-color: #DC3522; } } @-moz-keyframes glow-load { from { border-color: #EEF6F2;} 25% { border-color: #383434; } 50% { border-color: #FF5000; } 75% { border-color: #CCFF00; } to { border-color: #DC3522; } } @-o-keyframes glow-load { from { border-color: #EEF6F2;} 25% { border-color: #383434; } 50% { border-color: #FF5000; } 75% { border-color: #CCFF00; } to { border-color: #DC3522; } } @-keyframes glow-load { from { border-color: #EEF6F2;} 25% { border-color: #383434; } 50% { border-color: #FF5000; } 75% { border-color: #CCFF00; } to { border-color: #DC3522; } }
You can add and remove colours; however, I have found that adding more colours or making the duration too short (which means it changes colours quicker) causes the browser to use the CPU a lot and this could be problematic for older computers.
Many browsers require their own instructions, however, you can use a comma to save yourself some time.
@-webkit-keyframes glow-load, @-moz-keyframes glow-load, @-o-keyframes glow-load, @-keyframes glow-load { from { border-color: #EEF6F2;} 25% { border-color: #383434; } 50% { border-color: #FF5000; } 75% { border-color: #CCFF00; } to { border-color: #DC3522; } }
In most cases, this is absolutely fine, but if you wanted to give a different colour scheme to people running Mozilla Firefox, you would have to use the first example.
Affiliate information.
Photochirp.com is a participant in the Amazon Services LLC Associates Program and eBay affiliate programme; these are affiliate advertising programmes designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com & eBay.com.
As an Amazon Associate I earn from qualifying purchases. I am also a Capture One Pro affiliate partner. Please read the Privacy Policy page.