We help IT Professionals succeed at work.

Need help applying cross-browser compatible CSS animation

143 Views
Last Modified: 2018-09-18
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

David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
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.
CERTIFIED EXPERT

Commented:
You can use this website to check browser / version and compatibility https://caniuse.com/#search=animation
David FavorFractional CTO
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
Check out https://daneden.github.io/animate.css/ + use the library or extract the code you require.
CERTIFIED EXPERT
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

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
CERTIFIED EXPERT
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.