CSS动画

元素的变形：transform:变形函数1 变形函数2 ...

                      变形属性中可以有多个变形函数，变形函数之间用“空格”间隔；

        transform-origin:设置变形的基点位置。

                          取值：pointx/pointy取值为元素上的相对坐标，（0，0）左上角；

                                     坐标可以超出元素的相对坐标；

transition:设置元素的过渡效果，

         子属性：

        transition-duration：设置元素发生过渡效果所经历的总时长，单位：s（秒）/ms（毫秒）。

        transition-property：设置哪些元素会受到过渡效果的影响；默认all所有元素都受到过渡影响

                                        或：具体的CSS名称，这些CSS名称将受到影响，CSS名称用“，”间隔。

        transition-delay：设置元素过渡效果的延迟时间，默认为0，表示不延迟。

        transition-timing-function:设置元素过渡效果的缓动效果。

                                

translate(dx,dy),设置元素在水平方向、垂直方向上同时发生位置的移动。

                dx,设置水平方向上的移动距离。dx>0向右移动；dx<0向左移动；

                dy,设置垂直方向上的移动距离。dy>0向下移动；dy<0向上移动；

                translate(dx)，当省略参数dy时，则只在水平方向上发生移动，dy默认为0。dx同理。

rotate(deg),设置元素发生旋转，deg设置旋转的角度，单位为deg(角度)；

                deg>0时顺时针旋转；deg<0逆时针旋转；

scale(sx,sy),设置元素在水平方向、垂直方向同时发生缩放/翻转；

                sx,元素水平反向上发生缩放或翻转；

                sy,元素垂直方向上发生缩放或翻转；

        正值：

                sx/sy取值为1时，没有发生缩放；sx/sy>1时元素放大； 0<sx/sy<1时元素缩小。

        负值：sx<0,发生水平翻转，sx的绝对值是在水平方向上的缩放比例；

                   sy<0发生垂直翻转，sy的绝对值是在垂直方向上的缩放比例。