0

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

James A Mohler
  • 11,060
  • 15
  • 46
  • 72
cJ_
  • 486
  • 1
  • 4
  • 19

3 Answers3

0

Change your animation call to this,

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

It seems firefox does not understands some short hand properties.

demonofthemist
  • 4,081
  • 4
  • 26
  • 45
0

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).

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
-3

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>
user3074446
  • 124
  • 10