CSS3的过渡和动画

过渡和动画都是CSS3的重要部分，今天有时间，了解些相关内容并记录下。
在开始之前，首先看看CSS3的转化。

转化

CSS3的转化分为以下几种：

• translate 移动
• rotate　旋转
• scale　缩放
• skew　倾斜
• matrix　混合

每种转化都还有对应的3d版本

注意：闭合的内联元素不支持转化，过渡和动画：如<span>、<small>、<i>等。可以通过添加样式　display: inline-block 或　display: block　来转化成块级元素。

translate　移动

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

span {
    display: inline-block;
    transform: translate(50px,100px); /* 向下移动50像素，向右移动100像素 */
    -ms-transform: translate(50px,100px); /* IE 9 */
    -webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

rotate 旋转

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

i {
    display: block;