Simple CSS3 animation is not working in Firefox

Question

Simple CSS3 animation is not working in Firefox

255 Views Asked by cJ_ At 19 April 2025 at 05:43

I am trying to Animate a div. What i am actually doing in the animation is translating the div to 100%. but the animation only works in chrome and it is not working in Firefox. i tried to add prefix and i also included prefix-free.js plugin. Caniuse.com says firefox will support animations without prefixing. I have seen lot similar question in stack over flow. but most of them are using property's that are not yet supported in Firefox and other. But mine is very simple. I even tried by removing translation and background-color change. but it is also not working.

HTML:

<div class="container">
    <div class="icon"></div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js' ></script>

CSS:

.container {
    padding:3em;
}
.icon {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: test 1s linear 0 infinite normal both;
}
@keyframes test {
    0% {
        transform: translateX(50%);
        background-color: red;
    }
    100% {
        transform: translateX(0%);
        background-color: yellowgreen;
    }
}

Demo

Original Q&A

There are 3 best solutions below

demonofthemist On 08 August 2014 at 07:54

Change your animation call to this,

.icon
{
    animation: test 1s linear infinite;
}

It seems firefox does not understands some short hand properties.

user3074446 On 08 August 2014 at 07:56

Write your code like this

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .container {
            padding:3em;
        }
        .icon, .icon:hover {
            width: 100px;
            height: 100px;
            background: red;
            -webkit-animation: test 2s linear infinite; /* Chrome, Safari, Opera */
            animation:test 2s;
        }
          /* Chrome, Safari, Opera */
            @-webkit-keyframes test {
                from {background: red;}
                to {background: yellow;}
            }

            /* Standard syntax */
            @keyframes test {
                from {background: red;}
                to {background: yellow;}
            }
    </style> 
</head>
<body>
    <div class="container">
        <div class="icon"></div>
    </div>
</body>
</html>

**BoltClock** · Accepted Answer

Your syntax is invalid. Your zero animation-delay needs to have a unit, so it should be 0s, not 0:

.icon {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: test 1s linear 0s infinite normal both;
}

Unitless zeroes are only permitted for lengths, not times. See this answer for an explanation (the question is about transitions, but it applies to animations as well).

Simple CSS3 animation is not working in Firefox

There are 3 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in CSS-ANIMATIONS

Related Questions in PREFIXFREE

Trending Questions

Popular # Hahtags

Popular Questions