如何调整 CSS 动画时间？答案

【问题标题】：How to adjust the CSS animation timing?如何调整 CSS 动画时间？
【发布时间】：2013-03-12 21:27:14
【问题描述】：

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

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

【问题讨论】：

这是一个方便的参考：coding.smashingmagazine.com/2011/09/14/…
似乎没有简单的解决方案。是否有动态更改持续时间的要求？如果没有，也许调整@keyframes 中的百分比是最简单的方法。

标签： css css-animations

【解决方案1】：

Live Demo

使用此代码

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

希望这会对你有所帮助。

【讨论】：

感谢您的意见，桑迪普。但是我没有问题让我的示例以相等的部分工作，正如您在演示中显示的颜色 - 但我希望我的淡入淡出/旋转需要 10 秒，然后直到 30 秒后才再次循环。我可以增加持续时间 - 但是淡入淡出/旋转的速度不会保持不变。