animation 深化了解CSS3动画 transform transition (animate)

本文目录导航：

• 深化了解CSS3动画：animation、transform、transition
• 既然有了 jQuery，为什么 CSS3 还要有动画配置
• CSS3 的动画的意义何在？

深化了解CSS3动画：animation、transform、transition

深化了解CSS3动画：animation、transform、transition在CSS3之前，动画的成功重要依赖JavaScript或Gif图片，但是成果和成功环节往往不尽人意。

自CSS3问世以来，动画配置大幅简化，只要几句代码即可轻松成功，操作方便，性能更佳。

一、animation了解animation，可以尝试以下例子：动画提前1秒开局，元素从左0位置移动至右100px，有限循环来回移动。

要具体说明此代码：动画的语法准许设置多个阶段，发生不同的成果。

例如，元素周围跑一圈。

动画属性的运用，可以成功更丰盛的灵活成果。

二、transformtransform配置准许调整元素的状态，重要包括以下变形：1. rotate - 旋转旋转分为2D和3D，正数示意顺时针旋转，正数示意逆时针旋转，单位为deg。

联合animation，元素可以继续旋转。

在3D空间中旋转，须要设置x、y、z轴的旋转矢量值。

缩放元素，可以经过设置x、y轴的缩放倍数来成功。

缩放元素以发生由小变大的灵活成果。

歪斜元素，经过设置x、y轴的歪斜值。

transform: skew(45deg)示意x轴顺时针旋转45度。

transform: translate(10px,20px)示意水温和垂直方向位移。

三、transitiontransition属性用于设置元素过渡成果，CSS过渡以后是罕用的成功模式，蕴含4个子属性：为了解释这些属性，您可以参考在线预览示例。

总结，经过animation、transform和transition，开发者能够轻松创立丰盛的动画成果，成功更高品质的Web前端开发。

既然有了 jQuery，为什么 CSS3 还要有动画配置

CSS本是用来管理阅读器中的体现样式，而JQ作为JS的一个库，实质上是用于管理阅读器中的行为的。

于是有一局部人以为，动画成果也应该属于体现样式的，所以在曾经有各大盛行JS框架(不只仅是JQ)支持能够生成动画的状况下，CSS 3中依然添加了动画成果支持，而且局部思绪是学习了JQ之类的脚本库。

而为什么有了CSS 3动画，还要有JQ？ 由于JQ等脚本库先进去嘛……而且，JS中调用CSS 3动画也还不是那么繁难，并且，干流阅读器以前还没有齐全支持CSS 3动画，而用JS生成的动画则没有兼容性疑问。

所以，综合来说，先有JQ等脚本库提供动画，CSS 3吸取阅历添加规范。

在未来，等这些规范成熟了，阅读器支持度高了，JQ等脚本库就很或者会在外部调用CSS 3的动画来成功目前的动画配置了。

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的影响）。