如何调整CSS动画的时间？

我有下面的CSS做旋转和淡入，它工作得很好。旋转/淡入淡出的时间就像我想要的那样，但我想要在旋转/淡入之间延长一段时间 - 比如30秒左右。如果我增加持续时间，则会减慢旋转/褪色过度。如何设置关键帧以保留旋转/旋转时间，但在旋转/淡入之间允许30秒？我搜索了但找不到适用的答案。非常感谢你。如何调整CSS动画的时间？

@-webkit-keyframes SomeName { 
0% { opacity:0; -webkit-transform: rotateY(180deg); } 
50% { opacity:0; -webkit-transform: rotateY(180deg); } 
75% { opacity:1; -webkit-transform: rotateY(0deg); } 
100% { opacity:1; -webkit-transform: rotateY(0deg); } 
} 

#flipBox img.flippy { 
-webkit-animation-name: SomeName; 
-webkit-animation-timing-function: ease-in-out; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-duration: 10s; 
-webkit-animation-direction: alternate; 
}

p.s.仅供参考：这只是webkit，因此是唯一的前缀。

来源

2013-03-12 user2161038

这里有一个方便的参考：http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/ – 2013-03-12 13:11:39

谢谢，比利。 – user2161038 2013-03-12 13:56:38

似乎没有简单的解决方案。是否有任何要求来动态更改持续时间？如果不是，可以调整'@ keyframes'中的百分比是最简单的方法。 – rhgb 2013-03-12 15:11:52

Live Demo

使用此代码

animation:SomeName 5s; 
-moz-animation:SomeName 5s; /* Firefox */ 
-webkit-animation:SomeName 5s; /* Safari and Chrome */ 
-o-animation:SomeName 5s; /* Opera */

希望这会帮助你。

来源

2013-03-12 13:27:14

感谢您的意见，Sandeep。但我没有问题，让我的示例以相同的比例工作，正如您在演示中用颜色显示的那样 - 但我希望淡入淡出/旋转花费10秒，然后在30秒之后再循环。我可以增加持续时间 - 但淡化/旋转速度不会保持不变。 – user2161038 2013-03-12 13:56:00

如何调整CSS动画的时间？

回答

相关问题