transform属性、transition属性和animation属性的介绍

transform属性的五个方法

1. translate() 方法：可以按照设定的距离沿着坐标轴进行平移。

（1）translateX(x)仅水平方向移动（X轴移动）；
（2）translateY(y)仅垂直方向移动（Y轴移动）;
（3）translate(x,y)水平方向和垂直方向同时移动（X轴和Y轴同时移动）。

2. rotate() 方法：可以按照设定的角度绕着坐标轴进行旋转。

如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。
注：需定义transform-origin属性，transform-origin定义的是旋转的基点。

3. scale() 方法：可以按照设定的宽度（X 轴）和高度（Y 轴）进行放大或缩小。

（1）scaleX(x)元素仅水平方向缩放（X轴缩放）；
（2）scaleY(y)元素仅垂直方向缩放（Y轴缩放）；
（3）scale(x,y)使元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）。

4. skew() 方法：可以按照给定的给定的水平线（X 轴）和垂直线（Y 轴）进行倾斜。

（1）skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；
（2）skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）；
（3）skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）。

5. matrix() 方法：和2D变换方法合并成一个，有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换。

transition属性的四个子属性

属性	描述
transition-property	规定设置过渡效果的 CSS 属性的名称
transition-duration	规定完成过渡效果需要的时间
transition-timing-function	规定速度效果的速度曲线
transition-delay	定义延迟过渡效果的时间

animation属性的七个子属性

1、animation-name(动画名称)

2、animation-duration(动画执行一次所需时间)

3、animation-delay(动画在开始前的延迟时间)

4、animation-timing-function(动画以何种运行轨迹完成一个周期)

（1）linear:表示动画匀速进行。
（2）ease-in:表示动画以低速开始。
（3）ease-out:表示动画以低速结束。
（4）ease-in-out:表示动画以低速开始和结束。

5、animation-iteration-count(动画播放次数)

（1）数字：自定义动画播放的次数。
（2）infinite：设置动画无线循环播放。

6、animation-fill-mode(定义元素动画结束以后或者未开始的元素样式)

（1）forwards:表示动画结束后，元素直接接使用当前样式。
（2）backwards:表示在动画延迟时间时，元素使用from的属性值或者to属性值。

7、animation-direction(是否轮流反向播放动画)

（1）reverse:表示动画反向播放。
（2）alternate:表示动画在奇数次播放时为正向播放，为偶数次播放时为反向播放。
（3）alternate-reverse: 表示动画在奇数次播放时为反向播放，为偶数次播放时为正向播放。