web-dev-qa-db-ja.com

キーフレームアニメーションを使用して、複数のcss変換プロパティを個別にアニメーション化できますか？

次のようなキーフレームアニメーションを使用して、2つ（またはそれ以上）のcss変換プロパティを個別にアニメーション化します。

@keyframes translatex {
    100% {
        transform: translateX(100px);
    }
}
@keyframes rotatez {
    100% {
        transform: rotateZ(80deg);
    }
}

HTML：

<div class="rect"></div>

translatexアニメーションは、0秒の遅延で始まり、5秒間続く必要があります。 rotatezアニメーションは、1秒の遅延で開始し、3秒間続く必要があります。したがって、.rect要素は動き始め、1秒後に回転を開始し、3秒後に回転を停止し、さらに1秒後に動きを終了します。

アニメーションを適用する：

.rect {
    animation-name: translatex, rotatez;
    animation-duration: 5s, 3s;
    animation-timing-function: ease, ease-in-out;
    animation-delay: 0s, 1s;
    animation-direction: forward, forward;
}

ここでの問題は、rotatezアニメーションのみが適用されることです。私の質問は、css（キーフレームアニメーション、トランジション）だけを使用してそのようなアニメーションを実装する方法はありますか、それともJSとrequestAnimationFrameが必要ですか？

編集:: 私のフィドル

cssanimationtransformcss-animations
13
Dmitry

はい、可能です。 2つのアニメーション名を呼び出す代わりに、両方のアクションを含む1つのアニメーションのみを作成します

@keyframes translateXandZ {
    100% {
        transform: translateX(100px) rotateZ(80deg);
    }
}

Cssアニメーションのグーグルプレゼンテーションを見てください： グーグルcssアニメーション、スライド12

あなたが私たちにフィドルを与えれば、私はあなたの例で私の答えを更新することができます。

編集：これは少し粗いバージョンですが、回避策です：$： fiddle

@-webkit-keyframes translateXandZ {
    0% {-webkit-transform: translateX(0px) rotateZ(0deg);}
    2% {-webkit-transform: translateX(1px) rotateZ(0deg);}
    5% {-webkit-transform: translateX(3px) rotateZ(0deg);}
    20% {-webkit-transform: translateX(20px) rotateZ(0deg);}
    80% {-webkit-transform: translateX(80px) rotateZ(80deg);}
    95% {-webkit-transform: translateX(97px) rotateZ(80deg);}
    98% {-webkit-transform: translateX(99px) rotateZ(80deg);}
    100% {-webkit-transform: translateX(100px) rotateZ(80deg);}
}

これでアニメーションは線形になりましたが、イーズインアウトのようにするために、アニメーションの最初と最後で遊んだだけです。まだ完璧ではありませんが、これがあなたが望むものを手に入れる方法を私が見る唯一の方法です！

15
leMoisela