Cross-Browser CSS3 Keyframe Animation Firefox

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!

Zach Saucier

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