0

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

演示

4

3 回答 3

0

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

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

似乎 Firefox 不了解一些速记属性。

于 2014-08-08T07:54:35.800 回答
0

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

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

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

于 2014-08-08T07:58:39.127 回答
-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>
于 2014-08-08T07:56:30.270 回答