简单的 CSS3 动画在 Firefox 中不起作用答案

【问题标题】：Simple CSS3 animation is not working in Firefox简单的 CSS3 动画在 Firefox 中不起作用
【发布时间】：2014-10-01 15:05:27
【问题描述】：

我正在尝试为 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;
    }
}

Demo

【问题讨论】：

标签： html css css-animations prefixfree

【解决方案1】：

您的语法无效。你的零animation-delay 需要有一个单位，所以它应该是0s，而不是0：

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

无单位零只允许用于长度，而不是时间。请参阅this answer 以获取解释（问题是关于过渡，但它也适用于动画）。

【讨论】：

【解决方案2】：

将您的动画调用更改为此，

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

firefox 似乎不理解一些速记属性。

【讨论】：

【解决方案3】：

这样写你的代码

<!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>

【讨论】：