如何调整CSS动画计时？

我有下面的CSS，它做旋转和淡入，它的工作刚刚好。旋转/淡入淡出的时间和我想要的一样，但我希望在旋转/淡入淡出之间有更长的持续时间，比如30秒左右。如果我增加持续时间，旋转/淡入的速度会太慢。如何设置关键帧以保持旋转/旋转计时，但在旋转/淡入之间允许30秒？我搜索了一下，但找不到合适的答案。多谢各位

@-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、 仅供参考：这只是webkit，因此是唯一的前缀。

使用此代码

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

---

希望这能对您有所帮助。

这里有一个方便的参考：似乎没有简单的解决方案。是否需要动态更改持续时间？如果没有，也许调整

@关键帧中的百分比是最简单的方法。感谢您的输入，Sandeep。但我可以让我的示例在相同的部分工作，正如您在演示中展示的颜色一样——但我希望我的淡入/旋转时间为10秒，然后在30秒后再循环。我可以增加持续时间-但是淡入/旋转速度将不会保持不变。