CSS3 的动画的意义何在？
作者&投稿：盍富 （若有异议请与网页底部的电邮联系）
让你的页面动画在移动设备上运行更快。这是一个有趣的话题。这也是移动互联网前端工程师关心的问题。
我们都知道JavaScript效率低下的两个主要原因：操作DOM和使用页面动画。浏览器上的动画效果并不比客户端容易。通常情况下，我们会通过频繁的CSS操作来实现视觉动画效果。在DOM和CSS的频繁操作，浏览器将不停止执行重排和重绘，在浏览器的PC版的浏览器，因为可用的内存比较大，用户肉眼是动画网页制作的油漆和回流几乎看不见，所以工程师不用过多考虑性能问题的动画了。但在移动设备上可以有移动设备浏览器的不同分布（内置浏览器）内存不能PC浏览器的内存分配相当的版本，称iPhone Safari的内存只有10M，但一个外国工程师事实上，iPhone 3GS被分配到他旅行的记忆只有6m。
而Android是分配给浏览器的内存更是不确定的，无论是iPhone或Android或WindowPhone上或黑莓，没有官方的文件说，系统自带的浏览器占据了大部分的记忆，所以上述存储器中的数据是不确定的。目前，对CSS3的最佳支持Webkit的浏览器。在WebKit内核浏览器，苹果的Safari和谷歌的Chrome浏览器应该黑莓。
前端工程师知道CSS3提供了大量的新功能，包括二维、三维动画的特点，在这讨论的其他特点，我们讨论了目前的CSS3动画的意义。
使用CSS3动画：不占用js主线程；可以利用硬件加速；浏览器可以优化动画（不是在元素可见的时候，而不是动画，并减少对FPS的影响）。
撒耿润博： CSS3的动画的优点:1.在性能上会稍微好一些,浏览器会对CSS3的动画做一些优化(比如专门新建一个图层用来跑动画)2.代码相对简单但其缺点也很明显:1.在动画控制上不够灵活2.兼容性不好3.部分动画功能无法实现(如滚动动画...
新荣区17195695868： 性能动画方面,为什么用css3 - ？
撒耿润博： 因为css是很基础的画板代码,没有js那么复杂,功能也简单易做,一个animation就可以做出动画的效果,而且做的还很好看目前很多主流都在慢慢的提倡用html5+css3实现动画效果,而且也做得很好,像很多html5游戏一样.希望我的回答可以帮到你,有什么不懂可以追问.
新荣区17195695868： CSS3 是否能够成为未来 Web 动画的主流 - ？
撒耿润博： 不能.局限性太大.功能性不足.只能用于做一些比较小型的效果,适用于移动端,相比传统flash,gif等等的动画优点在于数据少,可控性高,缺点在于性能方面资源占用较大,但是相对的,小型CSS3动画的运行效率远远比flash和gif高的多....
新荣区17195695868： 介绍html5和css3的概念,介绍这两者的意义以及与html和css的区别,展望 - ？
撒耿润博： css3实在css的基础上进行了改进,有新增加一些新的属性:比如动画,transition,border-radius,animation动画,还有旋转等等.但是css3这些属性需要注意兼容性问题.
新荣区17195695868： css3里面动画有没有用过?动画的属性有哪些?具体是什么 - ？
撒耿润博： CSS3 动画属性 下面的表格列出了 @keyframes 规则和所有动画属性:@keyframes 规定动画. animation 所有动画属性的简写属性,除了 animation-play-state 属性.animation-name 规定 @keyframes 动画的名称. animation-duration 规定动...
新荣区17195695868： CSS3的animation - ？
撒耿润博： animation: 属性是一个简写属性,用于设置六个动画属性:animation: name duration timing-function delay iteration-count direction; 对应上面的属性意思: 动画名称 动画执行时间 动画速度曲线 延迟时间 执行次数 执行方向 nternet Explorer 10...
新荣区17195695868： css和css3的区别 - ？
撒耿润博： CSS和CSS3都是样式,CSS3是在CSS上新增了样式属性.CSS3新增特性CSS3圆角边框:border-radius(解决了原有圆角边框需要截图的问题)CSS3文本阴影与盒阴影:text-shadow、box-shadow(可以用于实现标签边框或阴影)CSS3背...
新荣区17195695868： css3过渡和css3动画它们都能实现动画效果,只是写的方式不一样,是吗? - ？
撒耿润博： css3动画:可以自定义节点改变属性,例如30%,40%....这种节点式定义属性的状态值,相对过度来说,可以把一系列的属性变化按照顺序节点来执行,这就好比把动画封装成了一个“函数”,既可以共用,又可以根据改变html标签元素的class...
新荣区17195695868： 运用css3+html5可以做出什么酷炫的动画效果不用js - ？
撒耿润博： 酷炫的动画效果主要是用CSS3做的. 所以你好好学一下CSS3 就可以了. 比如translate,animation 等.
新荣区17195695868： CSS3中动画属性transform,transition和animation属性的区别 - ？
撒耿润博： 1、translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的;2、rotate(deg)是用来控制元素旋转角度的;3、skew[x,y](deg) 这个属性是用来制作倾斜度的,做过设计的人可能会知道,这个是用来在2d里面创建3d透视图的时候必须的属性;4、scale3d(x,y,z) 用来放大缩小效果,属性是比值;5、matrix3d,css矩阵.通过这个矩阵属性,涵盖了上面所有的属性值,但是个人觉得可读性极差(全都是数字和单位,背起来有点模糊),目前没有理由推荐使用.
