0

divをアニメーション化しようとしています。アニメーションで実際に行っているのは、div を 100% に変換することです。ただし、アニメーションはクロムでのみ機能し、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

構文が無効です。ゼロ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 に答える