3

と組み合わせて使用​​する場合、 DRY CSS コードを実現しようとしています。私が次のものを持っているとしましょう：transformkeyframes

HTML

<div id="box"></div>

CSS

#box {
    width:300px;
    height:300px;
    background-color:red;

    animation: animate 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
@keyframes animate {
    from {
        transform: scale(0.8) translateY(100px) rotate(10deg);
    }
    to {
        transform: scale(0.8) translateY(100px) rotate(-10deg);
    }
}

JSFiddle の例。

アニメーション内でscale(0.8)andを実行しないようにするにはどうすればよいですか? translateY(100px)各ステップの変換内でこれらのプロパティを適用することなく、前後に回転させたいだけです。ここでは、2 つのステップ (および) のみが使用されてfromいますが、複数のステップが使用されてtoいる場合 (たとえば0%、ご想像のとおり、変更が後で表示される場合、これはあまり良くありません。20%40%60%80%100%

transform最終的に、私はこのようなものを探しています (プロパティがオーバーライドされるため、これは不可能です):

#box {
    transform: scale(0.8) translateY(100px);
}

@keyframes animate {
    from {
        transform: rotate(10deg);
    }
    to {
        transform: rotate(-10deg);
    }
}

これは可能ですか？

Ps。width/heightを にscale変更したり、margin/topプロパティを に変更したりする答えを探しているわけではありませんtranslate。また、値を簡単に変更できるようにするための LESS/SASS はありません。コードの重複が発生するためです。

4

2 に答える 2

3

私はあなたのために2つのオプションをまとめました- jsFiddle

オプション 1 - DRY ではなく、もう少し凝縮:

 #box {
        width:300px;
        height:300px;
        background:red;
        animation: animate 1s ease-in-out 0s infinite alternate;
    }
    @keyframes animate {
        from {
            transform: scale(0.8) translateY(100px) rotate(10deg);
        }
        to {
            transform: scale(0.8) translateY(100px) rotate(-10deg);
        }
    }

オプション 2 - 技術的には DRY ですが、必ずしも「より良い」とは限りません。

<div id="option2">
    <div id="box2"></div>
</div>

#option2{
    transform: scale(0.8) translateY(100px);
}
#box2 {
    width:300px;
    height:300px;
    background-color:blue;
    animation: animate2 6s ease-in-out 0s infinite alternate;
}
@keyframes animate2 {
    0%, 40%, 80% {
        transform: rotate(10deg);
    }
    20%, 60%, 100% {
        transform: rotate(-10deg);
    }
}

はるかに複雑なアニメーションを使用している場合は、オプション 2 を使用する価値があると思いますが、それを含むものでラップし、含むものdivをスケーリング/変換するだけでdiv、実際の利点が得られるかどうかはわかりません。規模。

于 2013-05-07T14:58:55.007 に答える
0

うわー、すべてのキーフレーム アニメーションの scale および translateY プロパティを書き直さなくても、これを行う方法がきっとあるはずだと思いました。いろいろ試してみましたが、ご希望の結果が得られませんでした。パラメーターが新しい場合、transform は古いパラメーターを上書きすることなく、より多くのパラメーターを受け取ることができるように思われます。

LESS/SASS は技術的に DRY ではないため使用したくないとおっしゃっていましたが、1 つの場所でコードを作成し、どこでも更新することを検討している場合は、それをお勧めします。あなたは自分自身を繰り返していないので（コードはそうですが）、私はそれをDRYと見なします。あなたが望むものを手に入れる他の方法は考えられません。

于 2013-04-12T15:40:42.877 に答える