关键帧动画之间暂停 [英] Pause between keyframe animations

问题描述

有一个简单的动画关键帧。

got an simple animation with keyframes.

    @-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-动画延迟的，但这只是延迟动画的开始。

Is it possible to add a pause between this keyframe animation? Like 5 seconds? I know there is a -webkit-animation-delay but this delays only the start of the animation.

P.S。我知道它只是WebKit的preFIX ......最后我得到它通过prefixr。

P.S. I know its only the webkit prefix... at the end I get it through prefixr.

推荐答案

得到了一个解决办法，但看上去有点脏

Got an workaround, but looks bit dirty

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

这篇关于关键帧动画之间暂停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！