17

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

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

HTML:

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

アニメーションは 0 秒のtranslatex遅延で開始し、5 秒間続く必要があります。rotatezアニメーションは 1 秒遅れて開始し、3 秒間続く必要があります。要素が移動を開始し、.rect1 秒後に回転を開始し、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 のみを使用してアニメーションを実装する方法はありますか、それとも JavaScript が必要requestAnimationFrameですか?

4

1 に答える 1

18

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

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

Google の「Animate your HTML5」プレゼンテーションを見てください。

少し大まかなバージョンですが、回避策を次に示します。

@-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);}
}

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

于 2012-11-27T08:30:12.680 に答える