css动画属性有哪些

前言
最近在逆战班学习了css动画属性，开始感觉还是不错滴，但过了几天有点忘记了，就再次翻了翻笔记整理了一下，希望能加深印象。有错的地方希望能够指点指点。
css动画结合属性有: transform(动画变形属性)
transition(动画过渡属性) animation(帧动画属性)
一：transform动画变形属性
在平面空间也就是2d空间中的transform动画变形属性:
1)2d的变换：
在平面进行位置的移动 transform:translate()
在平面进行旋转 transform:rotate()
在平面进行缩放 transform:scale()
在平面进行倾斜 transform:skew()
2)2d位移
transform:translate(参数1，参数2)
参数1：水平方向移动的距离
参数2：垂直方向移动的距离
参数的设置:如果是正值的情况下：往右往下 负值：往左往上
注意：参数表示坐标值，第二个参数可选，若省略默认为0px
单独设置X/Y的位移：
transform:translateX(水平方向移动的距离);
transform:translateY(垂直方向移动的距离);
3)2d缩放：
transform:scale(参数1，参数2); （0 -
0.999999 缩小 大于1 放大）
参数1：水平方向缩放的比例
参数2：垂直方向缩放的比例
注：如果两个参数相同的情况下 直接写一个。
单独设置X Y
transform:scaleX(水平方向缩放的比例);
transform:scaleY(垂直方向缩放的比例);
4)2d旋转：
transform:rotate(旋转的角度); 旋转的是一个度数 deg
注：默认情况下绕着元素中心点进行转动
5)2d倾斜：
transform:skew(参数1，参数2); deg(度数单位)
参数1：水平方向的倾斜角度
参数2：垂直方向的倾斜角度
注意：参数表示倾斜角度，第二个参数可选，若省略默认为不倾斜
单独设置围绕某个轴（X Y）
transform:skewX(度数)
transform:skewY(度数)
6)2d变形原点：(默认是以元素的中心点为基准点进行变形的)
transform-origin:水平方向 垂直方向
可以如下三种方式设置变形原点位置：left center（用表示位置的单词设置）或10px 10px（直接数值设置）或50%（百分比设置）
注: 如果transform:有两个功能函数：先写位移 再写旋转
在三维空间也就是3d空间中的transform动画变形属性

3D功能函数：
1)3D的位移：
transform:translate3D(x,y,z);
translateX(移动的距离) 沿着x轴移动
translateY(移动的距离) 沿着y轴移动
translateZ(移动的距离) 沿着z轴移动
注：沿着z轴移动的距离不能是百分比，x轴和y轴可以为百分比。
2)3D的旋转：
transform:rotate(旋转角度);
rotateX(旋转角度) 沿着x轴方向旋转
rotateY(旋转角度) 沿着y轴方向移动
rotateZ(旋转角度) 沿着z轴方向旋转(默认情况效果类似)
rotate3D(x,y,z,a) [ 0不旋转。1旋转 ]

• x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
• y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
• z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
  - a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
  注：直接写rotate(旋转角度)与沿着z轴方向旋转、平面旋转效果一样
  3)3D缩放：
  transform:scale3d(x,y,z); x,y,z为一个数值（0 -0.999999缩小 大于1 放大）
  scaleX(缩放大小) x轴缩放
  scaleY(缩放大小) y轴缩放
  scaleZ(缩放大小) z轴缩放
  4) css3-景深！（3D空间！）
  观察物体的一视角距离.产生近大远小的效果。
  语法:
  perspective: 1200px;（一般都是在父元素中使用）
  transform:perspective(1200px) （在子元素中使用）
  注：两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间
  如果当你的视线距离物体足够远的时候，基本上就不会有近大远小的感觉
  设置视觉角度：
  persperctive-origin: left top（表位置单词） / 50% 50%（百分比） / 0px 0px（数值）
  让当前形成一个3D舞台，让其子元素在3D空间里面进行一个变换:
  语法
  transform-style:preserve-3d /
  flat(默认值：平面空间);
  二：transform过渡属性
  css3过渡属性：

1. transition-property：检索或设置对象中的参与过渡的属性
2. transition-duration：检索或设置对象过渡的持续时间
3. transition-delay：检索或设置对象延迟过渡的时
4. transition-timing-function：检索或设置对象中过渡的动画类型适用于所有元素以及:before和:after伪元素。
   简写方法：
   transition: 属性值1 属性值2 属性值3 属性值4
   属性值1：
   需要参与过渡属性 all ( 能支持过渡属性的都会过渡变换 默认值)
   属性值2：
   过渡的时间 s秒 ms 毫秒
   属性值3：
   延迟的时间 s秒 ms 毫秒
   属性值4：
   过渡动画的效果，默认值为ease
   取值简单说明如下：
   ease : 先快后慢
   linear ：匀速
   ease-in：逐渐加快
   ease-out：逐渐变慢
   ease-in-out：先快后慢
   cubic-bezier:特殊的立方贝塞尔曲线效果
   注：transition 必须通过鼠标事件触发（鼠标滑过 ）
   三animation帧动画属性
   animation：不需要事件进行触发。调用关键帧即可
   制定关键帧：
   @keyframes 关键帧的名称{
   from{} 起始效果
   to{} 动画后的效果
   或
   0%{
   //开始状态
   }
   25%{
   }
   50%{
   }
   …
   100%{
   //结束状态
   }
   }
   animation: 复合属性
   animation-name 关键帧的名称
   animation-duration 动画的持续的时间
   animation-timing-function 动画运用的类型（匀速linear、加速度、减速度、贝塞尔曲线）
   animation-delay 动画的延迟
   animation-iteration-count 动画运动的次数（默认情况下运动1次） infinite(无限循环)
   animation-direction 运动的方向
   属性值：
   - reverse：反方向运行 （ 让关键帧从后往前执行 ）
   - alternate：动画先正常运行再反方向运行，并持续交替运行
   - alternate-reverse：动画先反运行再正方向运行，并持续交替运行
   animation-play-state
   属性值： paused暂停 running运动
   常用的写法：
   animation:关键帧的名称 动画运动的时间 linear(匀速) 动画延迟的时间