一、transform
属性：
旋转rotate（中心为原点）
扭曲、倾斜skew（skew(x,y), skewX(x), skewY(y)）
缩放scale（scale(x,y), scaleX(x), scaleY(y)）
移动translate（translateX,translateY）
矩阵变形matrix。
二、transition
css的transition允许css的
属性值在一定的时间区间内平滑地过渡。
四个属性：
- transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）。当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果，ident是可以指定元素的某一个属性值。
- transition-duration是用来指定元素,转换过程的持续时间
- transition-timing-function:
- transition-delay[延迟] ：是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果
三、animation（@keyframes规则）
CSS3中添加的新属性
animation是用来为元素实现动画效果的，但是animation无法单独担当起实现动画的效果。承载动画的另一个属性——@keyframes。使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。
-
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
-
通过 @keyframes 规则，您能够创建动画。
-
@keyframes定义一个动画，并定义具体的动画效果，比如是放大还是位移等等。
-
@keyframes 它定义的动画并不直接执行，需要借助animation来运转。
-
在动画过程中，您能够多次改变这套 CSS 样式。
-
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
百分比是指动画完成一遍的时间长度的的百分比 ，0% 是动画的开始时间，50%是动画完成一半的时间，100% 动画的结束时间。百分比后面的花括号写：在动画执行过程中的某时间点要完成的变化。 -
为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。 值 | 描述 | | :----------------- | :------------------------------------------------------------ | | animationname | 必需。定义动画的名称。 | | keyframes-selector | 必需。定义动画的名称。 合法的值： 1. 0-100% 2. from（与 0% 相同） 3. to（与 100% 相同） | | css-styles | 必需。一个或多个合法的 CSS 样式属性。
