查看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.
可以这样做吗?
解决方法
您希望使用steps()作为缓动函数而不是线性函数.
http://jsfiddle.net/trolleymusic/uTd3x/
我已经改变了你的动画值:
-webkit-animation: rotation 2s infinite linear;
至:
-webkit-animation: rotation 2s infinite steps(12);
step函数内部的数字是将动画划分为多少帧.
参考位置:http://css-tricks.com/snippets/css/keyframe-animation-syntax/ – 大约一半的位置有一个名为Steps()的部分
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。