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

我正在尝试动画一个div。我实际上在动画中做的是将div翻译为100%。但是这个动画只在chrome中运行，在Firefox中不起作用。我试图添加前缀，我还包括prefix-free.js插件。Caniuse.com说firefox将支持没有前缀的动画。我在stack over flow中看到过很多类似的问题。但其中大多数都使用了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;
    }
}

演示

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

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

无单位零只允许表示长度，不允许表示时间。(这个问题是关于过渡的，但它也适用于动画)

将你的动画调用改为this，

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

相关内容

最新更新

热门标签：