CSS 动画改变帧速率答案

【问题标题】：CSS Animations alter Frame RateCSS 动画改变帧速率
【发布时间】：2013-05-12 10:56:38
【问题描述】：

查看 CSS 动画以替换加载轮中的动画 GIF。

这里有一个基本的例子http://jsfiddle.net/kFmY8/448/

#me {
    -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(360deg);}
}

我想更改帧速率，以便每个周期只有 12 帧。这将消除动画的流动性，使其更接近于它所取代的动画 GIF。

这个可以吗？

【问题讨论】：

标签： css css-animations frame-rate

【解决方案1】：

您想将steps() 用于缓动功能，而不是linear。

http://jsfiddle.net/trolleymusic/uTd3x/

我已将您的动画值更改为：

-webkit-animation: rotation 2s infinite linear;

到：

-webkit-animation: rotation 2s infinite steps(12);

steps 函数中的数字是它将动画分成多少帧。

参考：http://css-tricks.com/snippets/css/keyframe-animation-syntax/ - 大约在中间有一个名为 Steps()

的部分

【讨论】：

这不是 6fps 而不是 12，因为 12 步被划分为 2 秒？
是的。原始帖子希望每个周期 12 帧，周期为 2 秒。

【解决方案2】：

将动画更改为渐变动画，然后使用 CSS 变换旋转属性以 30 度间隔固定每个块。将动画应用于每个动画，但延迟 0.1 秒。

.wheel {
    position:absolute; display:none;
}
.wheel li {
    width:4px; height:11px; position:absolute; -webkit-transform-origin:3px 21px; background:#222; border-radius:4px; list-style:none; display:block; opacity:.25; box-shadow:0 0 1px rgba(255,255,255,0.9);
}
.wheel li:nth-child(1) { -webkit-transform:rotate(30deg); -webkit-animation:fadeshift 1.2s infinite linear 0s; }
.wheel li:nth-child(2) { -webkit-transform:rotate(60deg); -webkit-animation:fadeshift 1.2s infinite linear 0.1s; }
.wheel li:nth-child(3) { -webkit-transform:rotate(90deg); -webkit-animation:fadeshift 1.2s infinite linear 0.2s; }
.wheel li:nth-child(4) { -webkit-transform:rotate(120deg); -webkit-animation:fadeshift 1.2s infinite linear 0.3s; }
.wheel li:nth-child(5) { -webkit-transform:rotate(150deg); -webkit-animation:fadeshift 1.2s infinite linear 0.4s; }
.wheel li:nth-child(6) { -webkit-transform:rotate(180deg); -webkit-animation:fadeshift 1.2s infinite linear 0.5s; }
.wheel li:nth-child(7) { -webkit-transform:rotate(210deg); -webkit-animation:fadeshift 1.2s infinite linear 0.6s; }
.wheel li:nth-child(8) { -webkit-transform:rotate(240deg); -webkit-animation:fadeshift 1.2s infinite linear 0.7s; }
.wheel li:nth-child(9) { -webkit-transform:rotate(270deg); -webkit-animation:fadeshift 1.2s infinite linear 0.8s; }
.wheel li:nth-child(10) { -webkit-transform:rotate(300deg); -webkit-animation:fadeshift 1.2s infinite linear 0.9s; }
.wheel li:nth-child(11) { -webkit-transform:rotate(330deg); -webkit-animation:fadeshift 1.2s infinite linear 1s; }
.wheel li:nth-child(12) { -webkit-transform:rotate(360deg); -webkit-animation:fadeshift 1.2s infinite linear 1.1s; }
@-webkit-keyframes fadeshift { 
    from { opacity:1; } to { opacity:.1; }
}

<div class="appload wheel"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></div>

QED。

【讨论】：