关键帧动画之间暂停(Pause between keyframe animations)

得到了与关键帧的简单的动画。

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

PS我知道它只是WebKit的前缀......最后我得到它通过prefixr。

Answer 1:

这个问题挣扎后我和丹尼米勒的帮助下，我发现，关键是100％之前停止。

您可以使用延迟开始与延迟和第一次迭代后，延迟将是动画完成后所剩下的时间量。

下面是我用我的实现：

@-webkit-keyframes spincube {
    from,to      {                                                    }
    8%,14%       { -webkit-transform: rotateY(-90deg);                }
    24%,30%      { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
    40%,46%      { -webkit-transform: rotateY(180deg) rotateZ(90deg); }
    56%,62%      { -webkit-transform: rotateY(90deg) rotateX(90deg);  }
    72%,78%      { -webkit-transform: rotateX(90deg);                 }
    88%,94%      { -webkit-transform: rotateX(0deg);                  }
}

正如可以看到，我停止在94％，其余的6％用于暂停所述第一框架上。

Answer 2:

得到了一个解决办法，但看起来有点脏

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

文章来源: Pause between keyframe animations