Question

我正在尝试动画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

Answer 1

将动画调用更改为

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

似乎firefox不了解一些短手属性。

Answer 2

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

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

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

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

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

3 个答案: