6

現時点では、すべてのバリエーションをリストする必要があります。

@-webkit-keyframes show {
    from { background-color: rgba(0, 0, 0, 0); }
    to { background-color: rgba(0, 0, 0, 0.8); }
}

@-moz-keyframes show {
    from { background-color: rgba(0, 0, 0, 0); }
    to { background-color: rgba(0, 0, 0, 0.8); }
}

[…]

あなたはその考えを理解します。これを短く書く方法はありますか？それを壊していないこのようなもの：

@-webkit-keyframes show, @-moz-keyframes show {}
4

3 に答える 3

6

CSSにネイティブではありませんが、CSSプリプロセッサを使用してこれを実現できます。たとえば、「ミックスイン」の概念をサポートして重複を削除するLESSなどです。

詳細については、こちらの記事、特に記事の例をご覧ください。

@-webkit-keyframes some-animation {.mixi-frames;}
@-moz-keyframes some-animation {.mixi-frames;}

.mixi-frames () {
    from {width: 254px;}
    to {width: 512px;}
}
于 2013-03-12T14:37:08.363 に答える
2

受け入れられた回答で述べられているように、CSSプリプロセッサのミックスインは、この問題を解決するための最先端技術です。

しかし、幸いなことに時代は変わり、ツールはどんどん良くなっています。Bootstrapのようなフレームワークは、ベンダープレフィックスを自動的にcssに追加するautoprefixerのようなツールに切り替わりました。このようにして、ベンダープレフィックスについて1秒も考える必要がなくなり、最新の状態を維持できます。

Autoprefixerは、caniuse.comからのデータを使用して、それ自体を最新の状態に保ちます。サポートするブラウザーを指定するだけで、もう気にする必要はありません。Gruntタスクの自動化にまだ切り替えていない場合は、grunt-autoprefixerタスクも利用できるので、試してみましょう。

于 2014-08-04T21:36:08.793 に答える
0

要件に応じて、 https：//github.com/jQueryKeyframes/jQuery.Keyframesなどのライブラリでも、キーフレーム構文を管理することで自動プレフィックスを実行できます。

于 2014-03-17T09:38:13.637 に答える