css动画

css动画
  定义动画：使用@keyframes 定义动画，关键帧可以使用关键字from~to，也可以使用0%~100%
  配置动画
    animation-name     动画名字
      @keyframes定义的动画的名字
    animation-duration  动画持续时间
      单位s，ms，默认为0s
    animation-iteration-count    动画迭代次数
      数字  默认迭代一次
      infinite  无限循环
    animation-delay     动画延迟执行时间
    animation-direction    动画方向
      normal  默认值，正常播放    
      reverse  最后一帧作为第一帧，第一帧作为最后一帧
      alternate  顺序交替反转
    animation-fill-mode    填充模式
    animation-timing-function    动画的速度曲线
      ease  默认值，先快后慢
      linear  线性增长，匀速
      ease-in  先慢后快
      ease-out  先快后慢
      ease-in-out  先慢后快再慢

第三动画库
  1.安装
    先把源码下载到本地
  2.使用
    <div class=' animate__animated animate__fadeOut' >hello 动画库</div>
css过渡
  div{
      transition:<property> <duration> <timing-function> <delay>;
     }
  transition
    transition-property  过渡属性
    transition-duration  持续时间
    transition-timing-function  时间曲线
    transition-delay  过渡延迟
    的速写形式，分别表示过渡属性，持续时间，时间曲线，过渡延迟
    过渡与动画的区别：
      1.过渡需要触发
      2.不是所有属性都能过渡

css变形
  transform  属性
    旋转
      rotateX (angle)  绕X轴旋转，例如单杠运动  30deg（度）
      rotateY (angle)  绕Y轴旋转，例如钢管舞运动
      rotateZ (angle)  绕Z轴旋转，例如旋转盘。
      rotate (angle)  与rotateZ()一致。
    倾斜
      skew（x，y）
        skewx（deg）
        skewy（deg）
    缩放
      scale（x，y）