transition (渐变动画)

transition-property(变换的属性，即那种形式的变换：大小、位置、扭曲等)

值为：

none
all
元素属性名（用,隔开）

transition-duration(变换延续的时间)

它是用来设置转换过程的持续时间，单位是s或者ms，默认值为0；

transition-timing-function (变换的速率)

ease：逐渐变慢（默认），等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)；
linear：匀速，等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)；
ease-in：加速，等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)；
ease-out：减速，等同于贝塞尔曲线(0, 0, 0.58, 1.0)；
ease-in-out：先加速后减速，等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)；
cubic-bezier：自定义贝塞尔曲线。

transition-delay(变换的延时)

它是来设置过渡动画开始执行的时间，单位是s或者ms，默认值为0；

transform (转变动画)

transform可以用来设置元素的形状改变，主要有以下几种变形：rotate（旋转）、scale（缩放）、skew（扭曲）、translate（移动）和matrix（矩阵变形），语法如下:

transform ： none | <transform-function> [ <transform-function> ]*

transform-origin 基点

所有的变形都是基于基点，基点默认为元素的中心点。用法：transform-origin: (x, y,z)，其中 x , y ,z 的值可以是百分比、rem 或者是 px 等等，也可以用表示位置的单词来表示例如：x 可以用left、center、right；y 可以用top、center、bottom;z 可以用top、center、bottom。(有z 3d 无z 2d)

rotate 旋转

表示通过指定的角度对元素进行旋转变形，如果是正数则顺时针旋转，如果是负数则逆时针旋转，例如：

transform: rotate(30deg);

scale 缩放

它有三种用法：scale(<number>[, <number>])、scaleX(<number>)和scaleY(<number>)；分别代表水平和垂直方向同时缩放、水平方向的缩放以及垂直方向的缩放，入参代表水平或者垂直方向的缩放比例。缩放比例如果大于1则放大，反之则缩小，如果等于1代表原始大小。

translate 移动

移动也分三种情况：translate(<translation-value>[, <translation-value>])、translateX(<translation-value>)和translateY(<translation-value>)；分别代表水平和垂直的移动、水平方向的移动以及垂直方向同时移动，移动单位是 CSS 中的长度单位：px、rem等;

skew 扭曲

扭曲同样也有三种情况，skew(<angle>[, <angle>])、skewX(<angle>)和skewY(<angle>)；同样也是水平和垂直方向同时扭曲、水平方向的扭曲以及垂直方向的扭曲，单位为角度。

animation (自定义动画,逐帧动画)

关键帧:

 @keyframes animationName {
    0% {
        properties: value;
    }
    percentage {
        properties: value;
    }
    100% {
        properties: value;
    }
}

animationName：动画名称，开发人员自己命名；
percentage：为百分比值，可以添加多个百分比值；
properties：样式属性名称，例如：color、left、width等等。

animation-name

是用来设置动画的(keyframe)名称，可以同时赋值多个动画名称，用,隔开：

animation-duration

完成该动画需要花费的时间，秒或毫秒

animation-timing-function

跟 transition-timing-function 一样

animation-delay

它是来设置动画的开始时间，单位是s或者ms，默认值为0：

animation-iteration-count

设置动画执行的次数，infinite为无限次循环。

animation-direction

是否轮询反向播放动画。normal，默认值，动画应该正常播放；alternate，动画应该轮流反向播放。

animation-fill-mode:forwards

让动画停留在最后结束(不要在执行次数里写 infinite )

Alex、Hu

css3 动画