CSS动画效果

2D、3D转换

（1）通过2D、3D转换，我们能够对元素进行移动、缩放、转动、拉长、拉伸。转换是使元素改变形状、尺寸和位置的一种效果，可以使用2D或3D转换来转换元素

（2）2D（transform属性）转换方法的值

   <1>translate(水平移动 垂直移动)：移动

   <2>rotate(数字+deg)：旋转角度值

   <3>scale(宽的缩放倍数，高的缩放倍数)：缩放

   <4>skew(向x轴旋转的角度，向y轴旋转的角度)：扭曲

<5>matrix()：矩阵

（3）3D转换方法

   <1>rotateX(数值+deg)：

   <2>rotateY(数值+deg)：

2、过渡：元素从一种样式逐渐改变为另外一种的效果（需要规定效果添加到哪个css属性上，规定效果的时长）

（1）属性

  <1>transition：简写属性，用于在一个属性中设置四个过渡属性

   <2>transition-property：规定应用过渡的css属性的名称（必须要有这个属性）

<3>transition-duration：定义过渡效果花费的时间，默认是0（必须要有这个属性）

<4>transition-timing-function：规定过渡效果的时间曲线。默认是ease

取值：

linear：线性过渡

ease：平滑过渡

ease-in：由慢到快

ease-out：由快到慢

ease-in-out：由慢到快再到慢

<5>transition-delay：规定过渡效果何时开始。默认是0

3、动画：使元素从一种样式逐渐变化为另一种样式的效果

（1）可以改变任意多的样式任意多的次数

（2）用百分比来规定发生的时间或用关键词“from”和“to”，等同于0%和100%

    0%是动画的开始，100%是动画的完成

（3）属性

   <1>animation：复合属性。检索或设置对象所应用的动画特效

<2>animation-name：检索或设置对象所应用的动画名称

<3>animation-duration：检索或设置对象动画的持续时间

<4>animation-timing-function：检索或设置对象动画的过渡类型

<5>animation-delay：检索或设置对向动画延迟的时间

<6>animation-iteration-count：检索或设置对象动画的循环次数，其中infinite是无限循环

<7>animation-direction：检索或设置对象动画在循环中是否反向运动

  normal：正常方向

   alternate：正常与反向交替

4、多列（要加浏览器内核）

（1）属性

   <1>columns：复合属性，设置或检索对象的列数和每列的宽度。

<2>column-width：每列的宽度

<3>column-count：列数

<4>column-gap：列与列之间的间隙

<5>column-rule：列与列之间的边框，复合属性

<6>column-rule-width：列与列之间的边框厚度

<7>column-rule-style：列与列之间的边框样式

<8>column-rule-color：列与列之间边框颜色