关键帧动画之间的暂停
关键帧动画之间的暂停
提问于 2012-07-27 14:21:31
有一个简单的关键帧动画。
@-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-动画-延迟，但这只是推迟动画的开始。
我知道这只是webkit的前缀..。最后，我把它写成了前缀。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-11-25 13:22:26
找到解决办法了，但看起来有点脏
@-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; }Stack Overflow用户
发布于 2013-08-19 10:29:54
在我自己和丹尼·穆勒的帮助下，我发现关键是在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%用于暂停第一帧。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11689802
复制相关文章
相似问题
腾讯云开发者
