28

CSSキーフレームアニメーションを操作しているときに、要素に次のような2つのアニメーションを与えるとわかりました。

.element {
    animation: animate1 1000ms linear infinite,
               animate2 3000ms linear infinite;
}

両方のアニメーションがtransformプロパティを使用してアニメーション化する場合、最後のアニメーションのみがカスケードによってトリガーされます。しかし、@keyframesアニメーションが1つmarginまたはdisplay他のcss属性と他の用途であるtransform場合、両方がトリガーされます。

これは、以下の関連コードを含むcodepenの例です。

CSS

@keyframes move {
    0%, 100% { transform: translateX(0px); }
    50% { transform: translateX(50px); }
}
@keyframes skew {
    0%, 100% { transform: skewX(0deg); }
    50% { transform: skewX(15deg); }
}
@keyframes opacity {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

.taco {
    animation: skew 2000ms linear infinite,
               opacity 4000ms linear infinite;
}

上記では、両方がトリガーされます

.burger {
    animation: skew 2000ms linear infinite,
               move 4000ms linear infinite;
}

上記では、最後のトリガーのみ（カスケードによる）-なぜですか？

誰もが使用せずにこれに対する解決策を持っていjsますか？それとも、これはうまくいかないものですか？例は非常に単純で、アニメーションを1つにまとめることができ、両方を宣言する必要がないことはわかっていますが、これは私が取り組んでいたより複雑なアニメーションのテストでした。

ありがとう

4

3 に答える 3

38

同じ属性（ここではtransform attribute）を複数回アニメートすることはできません。同じ要素で、最後の属性が他の属性を上書きします。

ターゲット要素をdivに配置し、1つのtransform-animationをdivに適用し、他のtransform-animationをターゲット要素に適用する必要があります。

.div_class
{
    animation:animate1 1000ms linear infinite;
}

.element
{     
   animation:animate2 3000ms linear infinite;
}
于 2013-01-19T17:34:55.140 に答える
9

同じ理由で

transform: skewX(45deg);
transform: translateX(4em);

要素を歪ませることはありませんが、移動するだけです。そして、スキューと移動の両方を行う場合は、それらをチェーンする必要がありますtransform: skewX(45deg) translateX(4em)

あなたは次のようなことをしなければならないでしょう

@keyframes t {
    25% { transform: skewX(15deg); }
    50% { transform: skewX(0deg) translateX(50px); }
    75% { transform: skewX(15deg); }
}

キーフレームを明示的に指定する必要はありません0%。100%キーフレームは自動的に生成されます。CSSアニメーションの仕様を参照してください。

そして、あなたは使用することができます

animation: t 4000ms linear infinite,
        opacity 4000ms linear infinite;

注意すべきもう1つのことは、skewX(angleValue) translateX(lengthValue) たまたまと同じであるということtranslateX(lengthValue) skewX(angleValue)です。ただし、ほとんどの場合、変換を適用する順序が重要です。skewX(angleValue) translateY(lengthValue)との結果は異なりますtranslateY(lengthValue) skewX(angleValue)。

于 2013-01-17T18:56:50.180 に答える
1

@StephanMullerのjsfiddleはほとんど答えであり、その構文は私のために機能しました http://jsfiddle.net/j83m5ha5/4

div {
background:green;
width:100px;
height:100px;
-webkit-animation: in 2s 200ms  forwards, out 1s 2200ms forwards;
}

OPは、アニメーションを標準化し、必要に応じてそれらを適用したかったので、当面の質問をしたと思います。私のクラスからこの最近の練習コードを取得してください：https ://jsfiddle.net/kgLc56w4/

#b15{
top:200px;
left:200px;
background:#ff3399;
-webkit-animation: r4 ease-in-out 2s forwards 24s, s4 ease-in-out 2s forwards 30s;
}

各ブロックは一方向にしか移動しないので、15のアニメーションを作成するといううんざりする作業を行う代わりに、単純な8を使用しました。これははるかに単純に実行できたはずですが、それは練習のポイントではありませんでした。

ただし、変更したのは、最後の15番目の要素でStephanの構文を使用して、もう一度移動すると機能することです。

タイミングに注意する必要があります。スティーブンの場合、1番目（イン）のアニメーションの長さを増やす場合は、2番目（アウト）の遅延を増やす必要があります。

例：

-webkit-animation: in 20s 200ms  forwards, out 1s 20200ms forwards;

うまくいけば、これが役立ちます！

于 2015-05-21T01:14:07.167 に答える