10

キーフレームを使用した単純なアニメーションを取得しました。

    @-webkit-keyframes rotation {
    0%   { -webkit-transform: rotate(10deg); }
    25%  { -webkit-transform: rotate(5deg); }
    50%  { -webkit-transform: rotate(10deg); }
    75%   { -webkit-transform: rotate(5deg); }
    100% { -webkit-transform: rotate(10deg); }

}

と

.class { -webkit-animation: rotation 1s infinite; }

このキーフレームアニメーションの間に一時停止を追加することは可能ですか？5秒くらい？-webkit-animation-delayがあることは知っていますが、これはアニメーションの開始のみを遅らせます。

PS私はその唯一のwebkitプレフィックスを知っています...最後に私はprefixerを通してそれを取得します。

4

2 に答える 2

8

回避策はありますが、少し汚れているように見えます

@-webkit-keyframes rotation {
        0%   { -webkit-transform: rotate(10deg); }
        5%  { -webkit-transform: rotate(5deg); }
        10%  { -webkit-transform: rotate(10deg); }
        15%   { -webkit-transform: rotate(5deg); }
        20% { -webkit-transform: rotate(10deg); }
        100% { -webkit-transform: rotate(10deg); }

    }
.class { -webkit-animation: rotation 5s infinite; }
于 2012-11-25T13:22:26.317 に答える