Need help applying cross-browser compatible CSS animation

egoselfaxis
egoselfaxis used Ask the Experts™
on
I was recently asked to add some kind of pulsing animation type of effect to some icons on a Real Estate site that I've been maintaining, as the client felt that the icons weren't noticeable enough and that we needed to find a way to make them stand out more.  Although I was pleased with the end result, I was disappointed to learn that the animation does not work in Microsoft Edge, Internet Explorer 11, or Safari.  Currently, it appears to only be working in Firefox, Chrome, and Opera.  

You can see an example of the animation effect that I applied on this page (just be sure to use either Firefox, Chrome or Opera):

https://staging.royalpalm.com/property/1900-royal-palm-way/

This effect was achieved with this relatively simple CSS code snippet:

.single-property ul.media-tabs-list li:nth-child(1) a { 
	animation: pulse1 2s infinite;
	animation-delay:0ms;
}

.single-property ul.media-tabs-list li:nth-child(2) a { 
	animation: pulse2 2s infinite;
	animation-delay:250ms;
}

.single-property ul.media-tabs-list li:nth-child(3) a { 
	animation: pulse3 2s infinite;
	animation-delay:500ms;
}

@keyframes pulse1 {
  0% {
    background: rgba(0, 0, 0, 0.6);
  }
  50% {
    background: rgb(0,174,239, 1);

  }
  100% {
    background: rgba(0, 0, 0, 0.6);
  }	
}

@keyframes pulse2 {
  0% {
    background: rgba(0, 0, 0, 0.6);
  }
  50% {
    background: rgb(0,174,239, 1);
  }
  100% {
    background: rgba(0, 0, 0, 0.6);
  }	
}

@keyframes pulse3 {
  0% {
    background: rgba(0, 0, 0, 0.6);
  }
  50% {
    background: rgb(0,174,239, 1);
  }
  100% {
    background: rgba(0, 0, 0, 0.6);
  }	
}

Open in new window


My question is -- is there anything I can change in my CSS that would make this animation effect work in Edge, IE and Safari? If so, how?  

If this effect simply can NOT be made to work in Edge, IE and Safari, then I'd like to replace my CSS with something that's fully cross-browser compatible and that achieves a similar effect.  It doesn't have to be the same type of effect .. just some other type of animation that makes the icons more obvious somehow.  Please advise.

Thanks,
- Yvan
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
David S.Consultant & Challenge Subduer
Top Expert 2009

Commented:
The first thing to do is make sure that none of the errors reported by the CSS Validator are causing that.
You can use this website to check browser / version and compatibility https://caniuse.com/#search=animation
David FavorFractional CTO
Distinguished Expert 2018

Commented:
Check out https://daneden.github.io/animate.css/ + use the library or extract the code you require.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

You're just about there, small items.
I would be inclined to pull out the -webkit- prefixes, there's very few browsers that actually require that anymore.

Looks like you just have a mistype.
All your 50% items have:
background: rgb(0,174,239, 1);

You need rgbA, not RGB (like the 0% and 100%).  You're specifying all 4 parameters, which is invalid for RGB.  Other browsers aren't as forgiving, don't know what that value means, and essentially end skipping it and animating from 0 - 100% of the same color.

Author

Commented:
>> You need rgbA, not RGB (like the 0% and 100%).  You're specifying all 4 parameters, which is invalid for RGB.  Other browsers aren't as forgiving, don't know what that value means, and essentially end skipping it and animating from 0 - 100% of the same color.

Thank you so much for catching this! It now works flawlessly in Edge, IE and Safari.  

- Yvan
David S.Consultant & Challenge Subduer
Top Expert 2009

Commented:
Ah! Good catch, Snarf0001!
You need rgbA, not RGB (like the 0% and 100%).  You're specifying all 4 parameters, which is invalid for RGB.  Other browsers aren't as forgiving, don't know what that value means, and essentially end skipping it and animating from 0 - 100% of the same color.
Actually it's a relatively new feature of recent CSS4-Colors editors drafts, so only some browsers support it. Using commas doesn't seem to be in the latest draft though.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial