Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

CSS3 animation的steps方式过渡

  animation默认以ease方式过渡,它会在每个关键帧之间插入补间动画,所以动画效果是连贯性的。除了ease,linear、cubic-bezier之类的过渡函数都会为其插入补间。但有些效果不需要补间,只需要关键帧之间的跳跃,这时应该使用steps过渡方式。
  比如GIF动图不支持程序对播放的控制,也不支持Alpha通道。但如果我们用一个PNG图片,把所有帧都放在一起,通过CSS3的animation控制background-position来播放就可以做到这些。
<style>
@-webkit-keyframes test {
  0% {background-position:0px -0%;}
  100% {background-position:0px -400%;}
}
@keyframes test {
  0% {background-position:0px -0%;}
  100% {background-position:0px -400%;}
}
div {
  height:35px;width:32px;
  -webkit-animation:test 400ms steps(4) infinite;
  animation:test 400ms steps(4) infinite;
  background:url(http://www.web-tinker.com/share/兔斯基揉脸.png);
}
</style>
<div></div>
  steps(4)表示让整个动画在4个关键帧之间切换。这个兔斯基揉脸的图片中包含了4帧,所以这里设置了4。而且我们的动画时长是400ms,也就是说每一帧停留100ms,这就和普通的GIF动图达到了一样的效果。而且animation可以控制播放状态,PNG可以提供Alpha通道。不过animation这东西的兼容性目前还不咋样,能否用于正式项目还有待考证。
网名:
54.167.202.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^