css - 如何调整 CSS 动画时间？

Question

我有下面的 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;
}

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

Answer 1

现场演示

使用此代码

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

希望这会帮助你。