troubleshooting Question

Need help applying cross-browser compatible CSS animation

Avatar of egoselfaxis
egoselfaxis asked on
* CSS Animation* css3CSSInternet Explorer (IE)* Microsoft Edge
6 Comments1 Solution153 ViewsLast Modified:
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);
  }	
}

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
ASKER CERTIFIED SOLUTION
Snarf0001

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 6 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 6 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros