css3动画在手机端的流畅度比较

我发现即使都是用css3的transition做动画,有的属性在动画播放时却会不流畅,出现定格动画的效果,这里做个比较,方便我以后做动画。

transition支持的属性类型

首先说一下transition支持的属性类型(是类型哦,具体属性还是自己去看这里),这个到处都有,我复制粘贴就行了。

color: 通过红、绿、蓝和透明度组件变换(每个数值处理)如:background-color,border-color,color,outline-color等css属性; length: 真实的数字 如:word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等属性; percentage:真实的数字 如:word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等属性; integer离散步骤(整个数字),在真实的数字空间,以及使用floor()转换为整数时发生 如:outline-offset,z-index等属性; number真实的(浮点型)数值,如:zoom,opacity,font-weight,等属性; transform list rectangle:通过x, y, width 和 height(转为数值)变换,如:crop visibility: 离散步骤,在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”,如:visibility shadow: 作用于color, x, y 和 blur(模糊)属性,如:text-shadow gradient: 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型(放射状的或是线性的)和相同的停止数值以便执行动画,如:background-image paint server (SVG): 只支持下面的情况:从gradient到gradient以及color到color,然后工作与上面类似 space-separated list of above:如果列表有相同的项目数值,则列表每一项按照上面的规则进行变化,否则无变化 a shorthand property: 如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化 具体什么css属性可以实现transition效果,在W3C官网中列出了所有可以实现transition效果的CSS属性值以及值的类型,大家可以点这里了解详情。 引用自http://www.w3cplus.com/content/css3-transition

流畅度比较

(下面的比较中,左边永远比右边流畅的,而且比较的双方是它们都能做同一个效果,否则没有对比的意义哦) 这个比较是我做好demo后用肉眼看出来的,而且在ios、pc、mac、android中看,流畅度会有不同,但暂时未发现下列列表中右侧比左侧流畅的情况。

transform:translate()流畅于paddingmargin transform:scale()流畅于widthheight(其实这两个没法比,因为transform:scale()是直接缩放,会拉伸元素的,但如果用的是一个纯色的div,倒是可以用。)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Grace development

通过手机浏览器调用客户端QQ

3821
来自专栏木子昭的博客

<自动化办公> Python 操控 Word

虽然Word不好用, 但还必须得用它, python-docx是专门用于编辑Word文档的一个工具库, 它有两大用途, 自动化生成word文档 and 自动化...

2.4K7
来自专栏老马寒门IT

01-移动端开发教程-CSS3新特性

1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红。对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间。接下来老马带大家一起学习移动端...

1967
来自专栏柠檬先生

VUE 入门基础(9)

十一,深入响应式原理    声明响应式属性     由于Vue不允许动态添加根级响应式属性,所以你必须在初始化实例钱声明根级响应式属性,哪怕只有一个空值。 ...

2335
来自专栏练小习的专栏

封装图片滑动效果

by bopooo 在腾讯QQ软件下载的页面有一个图片滑动的效果,觉得还不错 就自己封装了一个 技术方面在 动作缓冲上 遇到一些问题 不过都解决了 不过还...

25210
来自专栏九彩拼盘的叨叨叨

那些 CSS 的设计失误(译)

CSS Working Group 写的 Incomplete List of Mistakes in the Design of CSS 。译的不好,请见谅。

881
来自专栏进击的君君的前端之路

CSS常见样式(二)

1812
来自专栏老秦求学

百练 石头剪刀布

总时间限制: 1000ms内存限制: 65536kB描述 石头剪刀布是常见的猜拳游戏。石头胜剪刀,剪刀胜布,布胜石头。如果两个人出拳一样,则不分胜负。 一天,小...

3597
来自专栏极乐技术社区

『组件』大转盘、刮刮乐、老虎机……

组件 框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。 什么是组件: 组件是视图层的基本组成单元。 组件自带一些功能与微信风格的样...

5706
来自专栏iKcamp

React 深入系列1:React 中的元素、组件、实例和节点

文:徐超,《React进阶之路》作者 授权发布,转载请注明作者及出处 ---- React 深入系列,深入讲解了React中的重点概念、特性和模式等,旨在...

3848

扫码关注云+社区

领取腾讯云代金券