CSS3动画和js动画各有什么优劣

html-css012

CSS3动画和js动画各有什么优劣,第1张

CSS3的动画的优点:

1.在性能上会稍微好一些,浏览器会对CSS3的动画做一些优化(比如专门新建一个图层用来跑动画)

2.代码相对简单

但其缺点也很明显:

1.在动画控制上不够灵活

2.兼容性不好

3.部分动画功能无法实现(如滚动动画,视差滚动等)

JavaScript的动画正好弥补了这两个缺点,控制能力很强,可以单帧的控制、变换,同时写得好完全可以兼容IE6,并且功能强大。但想想CSS动画的transform矩阵是C++级的计算,必然要比javascript级的计算要快。另外对库的依赖也是一个很让人头疼的问题。

所以,对于一些复杂控制的动画,使用javascript会比较靠谱。而在实现一些小的交互动效的时候,就多考虑考虑CSS吧。

关于CSS3,可以先查看一下文档

新特性有:

border-radius 圆角, @font-face 字体, box-shadow text-shadow 框和文本的阴影

word-wrap, background-size, background-origin, border-image, box-sizing, calc, linear-gradient 等等

transform 转换

rotate(XYZ) 根据x,y,z轴旋转

translate(XYZ), scale(XYZ) 同理

perspective 透视,这个很多3D效果都要设置一下,不然3D还是只会有”2D”的效果

rotate 旋转,图片转个90或180度什么的

translate 位置移动

scale, skew, matrix 等

2D 转换

3D 转换

transition: 过渡,简单的动画(如:移个位置,变个长短),直接用这个属性就能搞定。

animation: 动画,3D可以调用硬件渲染。

新的长度单位:rem, ch,vw,vh,vmax,vmin 等。其中ch:数字“0”的宽度,vw 相对于视窗的宽度:视窗宽度是100vw.

clip-path: 绘制路径,类似SVG技术。 国外炫酷产品。

flex: flex布局,继 table 和 div 后的趋势,不了解或不熟悉的可以参考cssreference。

伪类选择器:如::target, :enabled, :disabed, :first-child, last-child等等

@media 媒体查询,适用于一些响应式布局中

columns: 分栏布局。

will-change: 改善渲染性能, 参考使用CSS3 will-change提高页面滚动、动画等渲染性能。

1 CSS3能代码更简洁、页面结构更合理,性能和效果得到兼顾;

2 CSS3.0的一个动态流概念很好,类似FLASH味道,这个CSS2.0无法比拟;;

3 CSS3数据更精简实用,许多CSS2.0要用图片做效果,它不需要,直接代码;;

CSS2.0要请求服务器次数就要明显高于CSS3.0,所以性能和访问就要明显差点;

4 但是就目前来讲,必须提到一点是兼容性问题,CSS3.0是新事物,所以目前来讲,国内浏览器大多还是IE8左右级别,大部分是不支持CSS3.0所以目前只有加强下CSS2.0功效果;

但是用DW CS6.0,IE9、FF4+、chrome11+来进行调试,它们是支持CSS3.0的;