Cross-Browser CSS3 Keyframe Animation Firefox
animation, css, css-animations, css-transforms, firefox
Solution
You need to include the browser-specific keyframe animations with their browser-specific transforms within 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;
}
}
Also, you should add the `-ms-animation` equivalents to get full browser support.
These days, a lot of these can be left out safely. Check out this post to find out which ones you need to include to support your target browsers.
Problem
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 be working in Firefox. Does anyone have an idea on 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!