8


次のcss3アニメーションがあります。

@-webkit-keyframes rotate {
    from {
    -webkit-transform: rotate(0deg);
    }
    to { 
    -webkit-transform: rotate(360deg);
    }
}

.animated {
-webkit-animation-name: rotate;
-webkit-animation-duration: 2.4s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: ease-in-out;
}


それは完璧に動作します、まあ...、アニメーション開始、アニメーション終了、待機（約0.5秒）、アニメーション開始、アニメーション終了、待機（約0.5秒） ...のループ間で待機させたいです...

PS: 試してみましたが-webkit-animation-delay、うまくいきません。

何か助けはありますか？

4

3 に答える 3

24

アニメーションの長さに 0.5 秒を追加してからkeyframes、回転量を変更しない余分なフレームを作成します。

@-webkit-keyframes rotate {
    0% {
    -webkit-transform: rotate(0deg);
    }
    83% { /*2.4 / 2.9 = 0.827*/
    -webkit-transform: rotate(360deg);
    }
    100% {
    -webkit-transform: rotate(360deg);
    }
}
.animated {
...
-webkit-animation-duration: 2.9s; /*note the increase*/
...
}

リトル デモ:リトル リンク.

于 2012-09-07T11:58:08.400 に答える
0

javascript で指定した時間要素の css クラスを無効にすると、問題が解決する場合があります。

function delayAnimation () {
    var animatedEl = document.getElementById('whatever');
    animatedEl.className = '';
    setTimeout(function () {
        animatedEl.className = 'animated'
        setTimeout(delayAnimation, 2400);// i see 2.4s is your animation duration
    }, 500)// wait 0.5s
}

お役に立てれば。

編集：コードを修正するためにこの回答を更新しました。jsfiddleで完全に機能する例を見ることができます。コードが機能していないことを指摘してくれた@Fabriceに感謝します。

于 2012-09-07T12:00:51.550 に答える
0

トランジションを使用することができます。例えば：

transition: all 0.6s ease-in-out;

どこtransition-delay:0.6s;

于 2012-09-07T12:33:34.197 に答える