Grow your CSS skills. Land your dream job.

animate css not working on firefox

  • # June 14, 2013 at 9:07 am

    #sample {
    background-color: #990000;
    display: block;
    height: 25px;
    width: 25px;
    }
    .animated:hover {
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;

    }
    @-webkit-keyframes flash {
    0%, 50%, 100% (opacity: 1;)
    25%, 75% (opacity: 0;)
    }

    @-moz-keyframes flash {
    0%, 50%, 100% (opacity: 1;)
    25%, 75% (opacity: 0;)
    }

    @-o-keyframes flash {
    0%, 50%, 100% (opacity: 1;)
    25%, 75% (*opacity: 0;)
    }

    @keyframes flash {
    0%, 50%, 100% (opacity: 1;)
    25%, 75% (opacity: 0;)
    }

    .flash {
    -webkit-animation-name: flash;
    -moz-animation-name: flash;
    -o-animation-name: flash;
    animation-name: flash;
    }

    # June 14, 2013 at 10:15 am

    That’s not enough. Could you put your HTML & CSS into Codepen?

    How are you applying the `.flash` class?

    Should this…

    be this….

    # June 15, 2013 at 6:27 am

    thanx paulie d for replying and i m sorry for d mistake it should be “flash” but still itz not working on firefox..

    # June 15, 2013 at 6:29 am

    Please, make a CodePen or a JSFiddle. Hard to debug code without seeing code.

    # June 15, 2013 at 6:35 am

    [http://jsfiddle.net/BKnzr/397/](http://jsfiddle.net/BKnzr/397/ “jsfiddle link”)

    # June 15, 2013 at 6:42 am

    I think you need curly braces instead of parentheses:

    .animated:hover {
    -webkit-animation: flash 1s;
    -moz-animation: flash 1s;
    -o-animation: flash 1s;
    animation: flash 1s;
    }
    @-webkit-keyframes flash {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0;}
    }
    @-moz-keyframes flash {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0;}
    }
    @-o-keyframes flash {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0;}
    }
    @keyframes flash {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0;}
    }

    # June 15, 2013 at 6:46 am

    Which you have in your fiddle, so I think the problem is how you declare the animation name and the duration, together it seems to work: http://jsfiddle.net/BKnzr/398/ (why do you have the * in you -o-keyframes?)

    # June 15, 2013 at 6:56 am

    thanx a ton crocodillon itz working for me too.
    i really dont know how that * came up there

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".