0

私は比較的単純なもの、JSFiddle hereにある短いアニメーションの大量のコードを持っていますが、私が書いたコードには失望しています。少し違うことをするために何度も自分自身を繰り返さなければならなかったので、それはもっと短くなる可能性がある、または少なくともそうあるべきだと思います：

HTML:

<div class="movement">
    <div class="mover x1 back"></div>
    <div class="mover x2 front"></div>
    <div class="mover x3 back"></div>
    <div class="mover x4 front"></div>
    <div class="mover x5 back"></div>
    <div class="mover x6 front"></div>
</div>

CSS:

.mover {
    position: absolute; 
    width: 200px; 
    height: 20px;
    background: black;

    -webkit-animation: animato 18s linear infinite;
    -moz-animation: animato 18s linear infinite;
    -o-animation: animato 18s linear infinite;
    animation: animato 18s linear infinite;
}

...

.x1 {
    right: 30%;
    top: 90px;

    -webkit-animation-delay: -3s;
    -moz-animation-delay: -3s;
    -o-animation-delay: -3s;
    animation-delay: -3s;
}
.x2 {
    right: 45%;
    top: 130px;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0.6; 

    -webkit-animation-delay: -6s; 
    -moz-animation-delay: -6s;
    -o-animation-delay: -6s;
    animation-delay: -6s;
}

... for each and every moving object, up to x6

私が本当にやりたいことは、スクロールする 6 つの移動オブジェクトを作成できる子 div タグのない 1 つのコンテナー div (上記の HTML の class="movement") だけを持つことです。また、各ルールの遅延時間/スケールを変更するためだけに -vendor-animation-delay または -vendor-transform を繰り返す必要がないことも素晴らしいことです。私が見逃したコードのより良いリファクタリングがありますか、それとも CSS を使用してこの効果を達成するために、すべての div でこれを繰り返す必要がありますか?

4

2 に答える 2

3

CSS を短縮できるSassやlessなどのプリプロセッサを使用することを除いて、できることはあまりありません(sass の例)。

@mixin prefixes($declaration,$value){
    -webkit-#{$declaration}:$value;
    -moz-#{$declaration}:$value;
    -o-#{$declaration}:$value;
    #{$declaration}:$value;
}
@mixin animation-delay($delay){
    @include prefixes("animation-delay",$delay);
}
@mixin position($right,$top){
    right:$right;
    top:$top;
}
.x1 {
    @include position(30%,90px);
    @include animation-delay(-3s);
}
.x2 {
    @include position(45%,130px);
    @include animation-delay(-6s);
    /* same is possible for the transform, etc. */
}

フィドルで例を示します（実際にはそこでsassを使用できます：言語-> CSSの切り替え-> SCSS）が、残念ながらsassオプションは壊れているようです。

less/sass ソースは間違いなく保守が簡単ですが、最終的には元の詳細な CSS にコンパイルされます。

于 2013-07-09T08:56:10.800 に答える