Animated CSS Glow

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. Please read the Privacy Policy page for further information.