1. CSS3中的变形–transform

transform –> 元素的改变

transform:rotate() –> 作用用于旋转
transform:rotate(45deg);

transform:skew() –> 作用用于元素的倾斜显示
transform:skew(x,y);
transform:skewX(45deg);
transform:skewY(45deg);

与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。
skew()函数不会旋转，而只会改变元素的形状。

transform:scale() –> 作用用于元素的缩放
transform:scale(x,y);
transform:scaleX(1.5);
transform:scaleY(0.5);

transform:translate() –> 作用向指定的方向移动，类似于position中的relative。
transform:translate(x,y);
transform:translateX(50px);
transform:translateY(100px);

matrix() –> 用来指定一个2D变换
matrix(x长度缩放，y轴扭曲，x轴扭曲，y宽度缩放，x位移，y位移)

2. CSS3中的变形–原点 transform-origin

transform-origin –> 用于对元素进行原点位置的改变。
取值与background-position类似。

3. CSS3中的动画–过渡属性transition-property

transition –> 元素动画的过渡

在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素最终状态样式，比如悬浮状态；
第三，在默认样式中通过添加过渡函数，添加一些不同的样式。

transition-property:指定过渡或动态模拟的CSS属性

transition-duration:指定完成过渡所需的时间

transition-timing-function: 指过渡的“缓动函数”用来指定过渡的速度形式

transition-timing-function:ease –> 逐渐变慢
transition-timing-function:linear –> 恒速
transition-timing-function:ease-in –> 渐显效果（越来越快）
transition-timing-function:ease-out –> 渐隐效果（越来越慢）
transition-timing-function:ease-in-out –> 渐显渐隐（先加速再减速）

transition-delay:指定开始出现的延迟时间

可以为多个css属性设置不同动画，如果全部为相同的为all
a{ transition: background 0.8s ease-in 0.3, color 0.6s ease-out 0.3;}
第一个时间的值为 transition-duration，第二个为transition-delay

特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。

4. CSS3中设置动画播放时间

@keyframes –> 关键帧
0% ~ 100%之间可以设置多个帧，
0%-100% = from()-to()

animation-name –> 主要用来调用@keyframes定义好的动画，定义的动画名称完全一致

animation-duration –> 主要用来设置动画播放时间

animation-timing-function –> 主要用来设置动画的速度形式

animation-delay –> 主要用来设置动画的延迟时间

animation-iteration-count –> 主要用来定义动画的播放次数 （可为数值次数 | infinite(无限次数)）

animation-direction –> 主要用来设置动画播放方向 （normal（默认值，动画的每次循环都是向前播放） | alternate（动画播放在第偶数次向前播放，第奇数次向反方向播放））

animation-play-state –> 主要用来控制元素动画的播放状态 （running | paused）

其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。