css3 动画系列（一）

其实w3c上的教程已经很清楚了，我也建议大家去看看w3c上的教程

平常写写小动画或者一些简单的动态图，原本可能要js或者动态图片才能实现。所以为什么使用css3做小动画肯定是存在他的优点的：

1 使用js对dom节点操作进行变换会带来大量重排、重绘，使得页面性能不佳
2 css3 动画启用的是硬件加速（GPU），而且对GPU的消耗很小；

主要的的有点就是以上两点了。至于缺点，就是兼容性的问题。可能你为了写一个小动画要写几十行甚至上百行css，这确实是一件很痛苦的事，大家知道css3属性，在IE9之前都是不支持的，但是相信，在不久的将来，低版本的IE一定会被摒弃的。

好了。废话不多说，进入正题；

---

先介绍两个属性：transform和transtion;

transform包括如下几个参数：

• translate
• rotate
• scale
• skew
• matrix

我们一个个介绍：

~~translate：

translate()的意思是元素根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数从其当前位置移动。可写负值；

例如：

-webkit-transform:translate(100px,100px);-moz-transform:translate(100px,100px);-ms-transform:translate(100px,100px);-o-transform:translate(100px,100px);transform:translate(100px,100px);

上面的元素现在与其原来的位置左边(left)移动了100px；上面(top)移动了100px；如下图：

---

~~rotate：

rotate：旋转的意思。就是使原来的元素以一个中心点旋转多少度得到的最后形态；可写负值；

-webkit-transform:rotate(45deg);//deg单位值度数;-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);

上面的元素现在与其原来的位置顺势针旋转了45度；如下图：

---

~~scale：

scale：改变元素的大小；

-webkit-transform:scale(1.2);//为原来的1.2倍-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2);

上面的元素现在与其原来的大小增大了1.2倍；如下图：

---

~~skew：

skew：使元素根据给定的角度产生翻转；

-webkit-transform:skew(45deg,30deg);//deg单位值度数;-moz-transform:skew(45deg,30deg);-ms-transform:skew(45deg,30deg);-o-transform:skew(45deg,30deg);transform:skew(45deg,30deg);

上面的元素现在与其原来的X轴倾斜了45deg,Y轴倾斜了30deg；如下图：

---

~~matrix

matrix 作用是将所有的transform参数放在一起，最后得到的结果；

transform:matrix(0.866,0.5,-0.5,0.866,0,0);-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);

以上就是transform系列参数了。对了，还一个transform-origin。就是你改变元素的起始点。默认是0 0；可以写成transform-origin:left top或者transform-origin:0 0;transform-origin:10% 10%;等等。

---

后续内容会慢慢写出来，敬请期待