web-dev-qa-db-ja.com

変換プロパティを使用した複数のCSSキーフレームアニメーションが機能しない

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

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

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

コードペンの例 以下の関連コード.

[〜＃〜] 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つに組み合わせることができ、両方を宣言する必要はないことを知っていますが、これは私が取り組んでいたより複雑なアニメーションのテストでした。

ありがとう

csscss3css-animations
22
Danferth

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

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

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

.element
{     
   animation:animate2 3000ms linear infinite;
}
31
Swarnendu Paul

同じ理由で

_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 Animations spec 。

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

_animation: t 4000ms linear infinite,
        opacity 4000ms linear infinite;
_

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

7
Ana

@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の構文を使用してもう一度移動し、機能することです。

タイミングに注意する必要があります。Stephenの場合、1番目（in）のアニメーションの継続時間を増やす場合、2番目（out）の遅延を増やす必要があります。

例：

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

これがお役に立てば幸いです！

0
Ivan Dončević