您现在的位置是：网站首页> 编程资料编程资料
深入理解css属性的选择对动画性能的影响CSS3中Transform动画属性用法详解 CSS3中Transition动画属性用法详解 CSS3中Animation动画属性用法详解 CSS3中的Transition过度与Animation动画属性使用要点jQuery利用CSS3的keyframes属性实现飞翔的小鸟动画特效CSS3 steps属性制作僵尸行Sprite动画特效源码css动画属性使用及实例代码(transition/transform/animation)
2021-09-05
890人已围观
简介 下面小编就为大家带来一篇深入理解css属性的选择对动画性能的影响。小编觉得挺不错的，现在分享给大家，也给大家做个参考
现在手机的占比越来越高，各种酷炫页面层出不穷，这些特效都离不开css动画。说到css动画，主流的情况也就无非这两大类：位移和形变。而我们在写一个动画特效的过程中，如何去提升它的性能呢？当然首先我们需要去了解一下基本的概念，比如浏览器渲染的工作原理等，这些我也在读了几位大牛写的相关文章后才有了一定的了解，这边我也不细说了，有兴趣的同学可以去了解一下。本次的目的简单粗暴地讲，其实就是我们应该使用什么css属性去进行动画的绘制时，能够有效的提高浏览器在渲染和绘制过程中的性能。
分别使用了left和transform在2秒内向右平移了500px的位移。代码如下：
然后在chrome下得到了如下的结果，第一张为使用left的截图，第二张为使用transform的截图：
transform的截图
显而易见，我们在帧模式这里可以看到left比transform帧数要低，而且在渲染和绘制这边的耗时，left要远远的大于transform。看到这里，相信大家心里已经有结论了。
我们再利用chrome的show paint rectangles来观察一下两者在动画过程中，渲染和绘制的区域有何差异,第一张为使用left的截图，第二张为使用transform的截图：
transform的截图
我们可以看到，使用left写的整个动画过程中，浏览器一直在进行绘制处理。而相对而言，使用transform时，仅仅是在动画开始和结束是进行了绘制。因此，对于动画的性能上，transform要更为出色。至于原因，这里就要引入一个触发重新布局的概念：
我们在改变一些属性时，如果是跟layout相关的属性，则会触发重新布局，导致渲染和绘制所需要的时间将会更长。因此，我们在写动画的时候因该规避这些属性：width, height, margin, padding, border, display, top, right, bottom ,left, position, float, overflow等。
不会出发重新布局的属性有：transform(其中的translate, rotate, scale), color, background等。
所以，我们平时在写css动画时，应该优先使用不触发重新布局的属性，这样可以使我们所展示动画效果的更加流畅。
以上这篇深入理解css属性的选择对动画性能的影响就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
原文地址：http://www.cnblogs.com/dehua-chen/archive/2016/04/20/5411728.html
相关内容
- CSS中越界问题的经典解决方案【推荐】纯CSS3炫酷圆形头像图片过滤特效源码纯CSS3扁平风格天气预报卡片动画特效源码CSS3实现input动态输入框特效源码CSS3+Animation实现鼠标滑过按钮背景动画特效源码CSS控制文本的长度 超过一行显示省略号的实现方法深入理解css属性的选择对动画性能的影响
- css3 中的新特性加强记忆详解纯css3绘制可爱的小猪猪样式效果源码CSS实现6种鼠标滑过按钮背景动画特效源码CSS3实现鼠标悬停照片墙放大特效源码CSS3 Animation 制作按钮鼠标滑过动画填充背景特效源码(13种)CSS3实现仿360浏览器错误提示页面特效源码CSS3实现的页面内容动画出入效果源码纯CSS3绘制的中国联通动态logo图标样式源码使用CSS3编写类似iOS中的复选框及带开关的按钮基础的CSS3弹性盒Flexbox布局使用实例CSS3的Flexbox布局的简明入门指南
- CSS控制文本的长度 超过一行显示省略号的实现方法CSS实现标题文字过长部分显示省略号的方法CSS文本超出指定宽度后隐藏并显示为省略号的实现方法表格单元格内容超出时显示省略号效果(实现代码)CSS控制文本超出指定宽度显示省略号和文本不换行效果的实现CSS超出文本指定宽度用省略号代替和文本不换行CSS自动换行、强制不换行、强制断行、超出显示省略号强制文本在一行内显示,并且后面有省略号效果的实现方法
- 深入理解CSS定位与层叠CSS属性之定位属性（图文详解）css绝对定位如何在不同分辨率下的电脑正常显示定位位置？(一定要看！)CSS position属性和实例应用演示css position定位属性_动力节点Java学院整理 css中的三种基本定位机制CSS的position定位和float浮动详解CSS 定位之position全面了解CSS3定位和浮动详解CSS定位的教程
- 三个CSS技巧你应该知道深入理解CSS定位与层叠纯css3绘制可爱的小猪猪样式效果源码GitHub倡导的CSS编写风格及文件目录部署指南CSS实现6种鼠标滑过按钮背景动画特效源码CSS自适应布局思路css三种方法实现div在浏览器水平居中使用CSS实现小三角形效果【附实例】CSS控制文本的长度 超过一行显示省略号的实现方法
- GitHub倡导的CSS编写风格及文件目录部署指南使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）CSS制作箭头图标代码(圆，三角形，椭圆) css实现的交互小三角箭头图标纯CSS实现箭头、气泡让提示功能具有三角形图标CSS多级数字序号的目录列表(2.2.1. 2.2.2 列表序号)完美解决调用上级目录中的css样式文件的路径问题CSS拾遗之箭头,目录,图标的实现代码
- stylus css 框架使用方法深入解析浅析CSS实现水平垂直同时居中的5种思路CSS3近阶段篇之酷炫的3D旋转透视 图解CSS中position属性的定位用法使用CSS的position属性控制页面布局的入门教程解析CSS编写中的属性优先级问题详解CSS中的伪类与伪元素及二者间的区别关于css兼容性问题及一些常见问题汇总
- 浅析CSS实现水平垂直同时居中的5种思路利用CSS3的flexbox实现水平垂直居中与三列等高布局Flexbox制作CSS布局实现水平垂直居中的简单实例让DIV水平垂直居中的两种完美方法推荐CSS解决页面图片水平垂直居中问题的方法全面总结使用CSS实现水平垂直居中效果的方法CSS定位“十字架”之水平垂直居中HTML对于元素水平垂直居中的探讨关于html水平垂直居中的问题小结DIV或者DIV里面的图片水平与垂直居中的方法
- CSS3近阶段篇之酷炫的3D旋转透视 CSS3让登陆面板3D旋转起来CSS3 3D旋转rotate效果实例介绍 CSS3实现的一款迷人3D木块旋转动画CSS3实现酷炫的3D旋转透视效果
- 使用CSS的position属性控制页面布局的入门教程CSS position:absolute全面了解CSS 定位之position全面了解使用CSS3的ruby-position固定注音位置的用法示例总结CSS的position定位属性在使用的一些重点图解CSS中position属性的定位用法css position 设置元素的定位方式详解
