CSS3 Cross Browser

Question

I have a simple "pulsating" effect on the play button (which is an anchor tag) using CSS3 and keyframes.

While it works flawlessly in Chrome and Safari, it doesn't seem to work in Firefox. Does anyone have an idea why?

li > a { -webkit-animation: pulsate 3s ease-in-out; -moz-animation: pulsate 3s ease-in-out; -o-animation: pulsate 3s ease-in-out; animation: pulsate 3s ease-in-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes pulsate { 0% { -webkit-transform: scale(0.8, 0.8); -moz-transform: scale(0.8, 0.8); -o-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); opacity: 0.3; } 50% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1.0; } 100% { -webkit-transform: scale(0.8, 0.8); -moz-transform: scale(0.8, 0.8); -o-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); opacity: 0.3; } } 

Any help would be greatly appreciated. Thanks!

Answer 1

You need to enable animation of keyframes in the browser with their browser-specific transformations in them

 @-webkit-keyframes pulsate { 0% { -webkit-transform: scale(0.8, 0.8); opacity: 0.3; } 50% { -webkit-transform: scale(1, 1); opacity: 1.0; } 100% { -webkit-transform: scale(0.8, 0.8); opacity: 0.3; } } @-moz-keyframes pulsate { 0% { transform: scale(0.8, 0.8); opacity: 0.3; } 50% { transform: scale(1, 1); opacity: 1.0; } 100% { transform: scale(0.8, 0.8); opacity: 0.3; } } @-ms-keyframes pulsate { 0% { -ms-transform: scale(0.8, 0.8); opacity: 0.3; } 50% -ms-transform: scale(1, 1); opacity: 1.0; } 100% { -ms-transform: scale(0.8, 0.8); opacity: 0.3; } } @-o-keyframes pulsate { 0% { transform: scale(0.8, 0.8); opacity: 0.3; } 50% transform: scale(1, 1); opacity: 1.0; } 100% { transform: scale(0.8, 0.8); opacity: 0.3; } } @keyframes pulsate { 0% { transform: scale(0.8, 0.8); opacity: 0.3; } 50% { transform: scale(1, 1); opacity: 1.0; } 100% { transform: scale(0.8, 0.8); opacity: 0.3; } } 

In addition, you must add the equivalents of -ms-animation to get full browser support.

---

Nowadays, many of them can be excluded. Check out this post to find out which ones you need to enable to support targeted browsers.