Question

I have a nice little three-part iPhone-esque “pop” animation prepared for use with a “too long” error to present to the user. To use it, I just call .show() on the hidden error div. Under Safari it works beautifully, but under Firefox it just lands with a thud, skipping the animation entirely and just doing a regular old .show().

What can I do to get this to work under mozilla too?

The relevant CSS:

@-webkit-keyframes pop-in {
    0% { opacity: 0;-moz-transform: scale(0);-webkit-transform: scale(0); }
    50% { opacity: 1;-moz-transform: scale(1.5);-webkit-transform: scale(1.5); }
    100% { opacity: 1;-moz-transform: scale(1);-webkit-transform: scale(1); }
}

@-moz-keyframes pop-in {
    0% { opacity: 0;-moz-transform: scale(0);-webkit-transform: scale(0); }
    50% { opacity: 1;-moz-transform: scale(1.5);-webkit-transform: scale(1.5); }
    100% { opacity: 1;-moz-transform: scale(1);-webkit-transform: scale(1); }
}

@-ms-keyframes pop-in {
    0% { opacity: 0;-moz-transform: scale(0);-webkit-transform: scale(0); }
    50% { opacity: 1;-moz-transform: scale(1.5);-webkit-transform: scale(1.5); }
    100% { opacity: 1;-moz-transform: scale(1);-webkit-transform: scale(1); }
}

@keyframes pop-in {
    0% { opacity: 0;transform: scale(0);transform: scale(0); }
    50% { opacity: 1;transform: scale(1.5);transform: scale(1.5); }
    100% { opacity: 1;transform: scale(1);transform: scale(1); }
}


#error {
    ...
    -webkit-animation:pop-in 0.3s;
    -moz-animation:pop-in 0.3s;
    -ms-animation:pop-in 0.3s;
    animation:pop-in 0.3s;
    ...
}

Answer 1

Simply make your selector to #error.active and after showing the element, add the .active class..