How to get CSS pulsating effect to work in FireFox and Internet Explorer?

Question

I'm using CSS to achieve a 'pulsating' or 'throbbing' effect.

.throb {
    border: 3px solid #555;
    height: 50px;
    width: 50px;
    -webkit-border-radius: 50%;
    -webkit-animation: pulsate 2s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0;
    z-index: 999;
}

@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: scale(0.1, 0.1); opacity: 0.0;
    }
    50% {
        opacity: 1.0;
    }
    100% {
        -webkit-transform: scale(1.2, 1.2); opacity: 0.0;
    }
}

See demo: http://jsfiddle.net/kJ6ZG/

Source: https://stackoverflow.com/a/4911441/1709033

It works fine in Chrome and Safari. However it doesn't seem to work in the following browsers:

• FireFox
• Internet Explorer

How can I modify the CSS so that the effect works in FF and IE?

Answer 1

You need to add the relevant browser/vendor prefixes, the -webkit- part in your CSS specifically targets webkit browsers like chrome, by adding similar styles without this part it will work in FireFox (per below example), by changing the webkit part to ms it will work in Explorer.

The standard prefixes are: -webkit- for webkit browsers (Safari, Chrome) -ms- for MSIE -moz- for Firefox -o- for Opera, removing the prefix will represent the base property which is often already accepted by some browsers regardless of their specific prefix. If you arent sure, you can always look at caniuse.com

Demo Fiddle

CSS

.throb {
    border: 3px solid #555;
    height: 50px;
    width: 50px;
    -webkit-border-radius: 50%;
    -webkit-animation: pulsate 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    -ms-border-radius: 50%;
    -ms-animation: pulsate 2s ease-out;
    -ms-animation-iteration-count: infinite;
    -moz-border-radius: 50%;
    -moz-animation: pulsate 2s ease-out;
    -moz-animation-iteration-count: infinite;
    -o-border-radius: 50%;
    -o-animation: pulsate 2s ease-out;
    -o-animation-iteration-count: infinite;
    border-radius: 50%;
    animation: pulsate 2s ease-out;
    animation-iteration-count: infinite;
    opacity: 0;
    z-index: 999;
}
@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: scale(0.1, 0.1);
        opacity: 0.0;
    }
    50% {
        opacity: 1.0;
    }
    100% {
        -webkit-transform: scale(1.2, 1.2);
        opacity: 0.0;
    }
}
@-moz-keyframes pulsate {
    0% {
        -moz-transform: scale(0.1, 0.1);
        opacity: 0.0;
    }
    50% {
        opacity: 1.0;
    }
    100% {
        -moz-transform: scale(1.2, 1.2);
        opacity: 0.0;
    }
}
@-ms-keyframes pulsate {
    0% {
        -ms-transform: scale(0.1, 0.1);
        opacity: 0.0;
    }
    50% {
        opacity: 1.0;
    }
    100% {
        -ms-transform: scale(1.2, 1.2);
        opacity: 0.0;
    }
}
@-o-keyframes pulsate {
    0% {
        -o-transform: scale(0.1, 0.1);
        opacity: 0.0;
    }
    50% {
        opacity: 1.0;
    }
    100% {
        -o-transform: scale(1.2, 1.2);
        opacity: 0.0;
    }
}
@keyframes pulsate {
    0% {
        transform: scale(0.1, 0.1);
        opacity: 0.0;
    }
    50% {
        opacity: 1.0;
    }
    100% {
        transform: scale(1.2, 1.2);
        opacity: 0.0;
    }
}