Need help applying cross-browser compatible CSS animation

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
egoselfaxisAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David S.Commented:
The first thing to do is make sure that none of the errors reported by the CSS Validator are causing that.
0
lenamtlCommented:
You can use this website to check browser / version and compatibility https://caniuse.com/#search=animation
0
David FavorLinux/LXD/WordPress/Hosting SavantCommented:
Check out https://daneden.github.io/animate.css/ + use the library or extract the code you require.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Snarf0001Commented:
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.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
egoselfaxisAuthor 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
0
David S.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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS Animation

From novice to tech pro — start learning today.