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.
Avatar of David S.
David S.
Flag of United States of America image

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

You can use this website to check browser / version and compatibility https://caniuse.com/#search=animation
Avatar of David Favor
David Favor
Flag of United States of America image

Check out https://daneden.github.io/animate.css/ + use the library or extract the code you require.
ASKER CERTIFIED SOLUTION
Avatar of Snarf0001
Snarf0001
Flag of Canada image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of egoselfaxis
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
Avatar of David S.
David S.
Flag of United States of America image

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

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

43K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo