2

ほぼ同一のCSS3アニメーションをたくさん書いているときに、コードを短くする方法があるのではないかと思いました。
毎回、最後のキーフレームのみが異なります。

@-webkit-keyframes one {
    from {
        [identical properties]
    }
    [...etc...]
    80% {
        [identical properties]
    }
    to {
        margin-left: 20px;
    }
}

@-webkit-keyframes two {
    from {
        [identical properties]
    }
    [...etc...]
    80% {
        [identical properties]
    }
    to {
        margin-left: 50px;
    }
}

そのコードはかなり長いので、簡単に短縮できると思いましたが、アニメーション全体を何度も定義する必要があるようです。このようなことを試しましたが、ChromeとSafariでは機能しません。

@-webkit-keyframes one, two {
    from {
        [identical properties]
    }
    [...etc...]
    80% {
        [identical properties]
    }
    to {
        margin-left: 20px;
    }
}

@-webkit-keyframes two {
    to {
        margin-left: 50px;
    }
}

2つの同一のアニメーションを定義する方法はありませんか？：o

4

3 に答える 3

1

現時点ではない。CSSを圧縮している場合、この非効率性の多くが解消されることを忘れないでください。

于 2011-08-01T12:13:37.143 に答える
1

本質的にではありません。特にベンダープレフィックスの場合、CSSは非常に目がくらむ可能性がありますが、ファイルを適切にデプロイしている場合（GZip、キャッシングなど）、それは実際には非効率ではなく、書くのが面倒です。

プロジェクトによっては、CSSをPHPとして解析し、そこで変数を定義できます。私はそのアイデアが本当にセクシーだと思いますが、それを使う必要性は十分ではありませんでした。

于 2011-08-03T03:40:48.593 に答える
1

開発中のコピー貼り付けを回避するために、 SCSS/SASSやLESSなどのCSSプリプロセッサを使用できます。ミックスイン機能により、コードサイズが大幅に削減されます。

単一のプロパティの場合、単一のミックスインを作成するだけで十分です。

.Duplicates(@marginLeft) {
    from { /* ... */ }
    80%  { /* ... */ }
    to { margin-left: @marginLeft;}
}
@-webkit-keyframes one {
    .Duplicates(20px);
}
@-webkit-keyframes two {
    .Duplicates(50px);
}

デモ：純粋なCSS（3）を使用したアニメーションの忙しいスーパーマーケット

私にとって、以前のミックスインは十分ではありませんでした。動的な名前とベンダープレフィックスも必要でしたか？、そのため、10 x 5 = 50回（10の名前、5つのベンダー）のルールを作成する必要はありません。これは、CSSプリプロセッサの能力を示すチャンスです。

于 2012-06-14T08:47:16.230 に答える