CSS3 animation的steps方式过渡
2024-10-19 04:22:04
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这东西的兼容性
目前还不咋样,能否用于正式项目还有待考证。
最新文章
- JavaScript String对象
- 前端构建大法 Gulp 系列 (一):为什么需要前端构建
- 聚合数据董铭彦:小程序开发的兴起将带火API数据交易
- cxf和jaxws的对比
- 将FlashPlayerDebugger的trace()功能输出到日志
- 通过LinQ查询字符出现次数
- 国外HTML网站模版(卖成品模版)
- JavaScript高级 面向对象的程序设计 (二)《JavaScript高级程序设计(第三版)》
- nexcel 读取 excel
- Codevs 1800 假面舞会 2008年NOI全国竞赛
- JBOSS尝鲜
- Nginx的gzip
- 实体类和json互相转换
- 解决Echarts封装成组件时只有最后一个才会缩放的问题
- RabbmitMQ-组成及简单使用
- 微信h5支付demo微信H5支付demo非微信浏览器支付demo微信wap支付
- 数据分析处理库pandas及可视化库Matplotlib
- 关于Eclipse如何加入Gradle文件与Android Studio两个平台一起开发,工作目录不发生变化
- Linux文件与目录管理(三)
- java Date 当天时间戳处理