8

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!

sdny
  • 156
  • 1
  • 1
  • 10
  • 2
    To ease maintainability, I recommend to use a CSS preprocessor such as [Autoprefixer](https://github.com/ai/autoprefixer). – Rob W Dec 16 '13 at 18:10

1 Answers1

20

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;
    }
}

jsFiddle

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.

Community
  • 1
  • 1
Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
  • [Related answer on prefixes](http://stackoverflow.com/questions/25110510/why-doesnt-css-feature-work-in-browser-but-works-in-others) – Zach Saucier Aug 13 '14 at 16:08
  • Mother of CSS3! why do browser developers have to do this to us? – Felype Apr 26 '15 at 02:38
  • @Felype It's not wholly their fault, part is due to how specs are made. But most of these can be left out these days. Check the post linked in my edit to see which you need – Zach Saucier Apr 26 '15 at 03:03