如何用 CSS3 制作过渡动画 （2D变形transform）

transition:

过渡动画： 是从一个状态 渐渐的过渡到另外一个状态

帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片

     过渡 （transition）是CSS3 中具有颠覆性的特征之一，我们可以在不使用flash动画或者JavaScript 的情况下，当元素从一种方式变换为另一种方式时为元素添加效果。

语法格式：

    transition： transition-property transition-duration transition-timing-function transition-delay；

    如果有多组属性变化，还是用逗号隔开。

属性&描述

transition：简写属性，用于在一个属性中设置四个过渡属性。

transition-property：规定应用过度的 CSS 属性的名称 （eg. width height）

transition-duration：定义过渡效果花费的时间。默认值是0。

transition-timing-function：规定过度效果的时间曲线。默认是 “ease”。

transition-delay：规定过渡效果何时开始。默认是 0。

---

要想所有的属性都变化过渡，写一个all 就可以。

transition-duration 花费时间 单位是 秒 s 比如 0.5s 这个s单位必须写 ms 毫秒

transform:

    transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

变形转换 transform    transform  变换 变形的意思            《 transformers 变形金刚》

属性值：

translate（x,y）移动

scale（x,y）缩放

rotate（deg） 旋转 （deg为单位，不能丢）

skew（deg，deg）倾斜

---

transform-origin 调整元素转换变形的原点