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

4

2 回答 2

12

在我自己解决这个问题并在 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% 用于在第一帧暂停。

于 2013-08-19T10:29:54.730 回答
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 回答