在关键帧动画之间暂停

Question

得到了一个带关键帧的简单动画.

    @-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前缀...最后我通过前缀得到它.

Answer 1

在我自己和Denny Mueller的帮助下努力解决这个问题后,我发现关键是在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; }