Простая анимация CSS3 не работает в Firefox

Я пытаюсь оживить div. То, что я на самом деле делаю в анимации, это перевод div на 100%. но анимация работает только в Chrome и не работает в Firefox. я попытался добавить префикс, и я также включил плагин prefix-free.js. Caniuse.com говорит, что Firefox будет поддерживать анимацию без префиксов. Я видел много подобных вопросов в стеке над потоком. но большинство из них используют свойства, которые еще не поддерживаются в Firefox и других. Но мой очень прост. Я даже пытался удалить перевод и изменение цвета фона. но это тоже не работает.

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;
    }
}

демонстрация

Источник

3 ответа

Решение

Ваш синтаксис неверен. Ваш ноль animation-delay должен иметь блок, поэтому он должен быть 0sне 0:

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

Нулевые единицы допускаются только для длин, а не для времен. См. Этот ответ для объяснения (вопрос о переходах, но это относится и к анимации).

Источник

Измените свой анимационный вызов на это,

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

Кажется, Firefox не понимает некоторые свойства коротких рук.

Источник

Напишите свой код, как это

<!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>
Источник
Другие вопросы по тегам