Avatar of egoselfaxis
egoselfaxis
 asked on

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
* CSS Animation* css3CSSInternet Explorer (IE)* Microsoft Edge

Avatar of undefined
Last Comment
David S.

8/22/2022 - Mon
David S.

The first thing to do is make sure that none of the errors reported by the CSS Validator are causing that.
lenamtl

You can use this website to check browser / version and compatibility https://caniuse.com/#search=animation
David Favor

Check out https://daneden.github.io/animate.css/ + use the library or extract the code you require.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
ASKER CERTIFIED SOLUTION
Snarf0001

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
egoselfaxis

ASKER
>> 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.

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.