CSS 之动画

CSS动画

   1.定义动画：使用@keyframes 定义动画，关键帧可以使用关键字from~to，也可以使用0%~100%

   2.配置动画：
       animation-name              动画的名字
          @keyframes定义的动画的名字
       animation-duration          动画持续的时间
          单位 s、ms 默认为零秒
       animation-iteration-count   动画迭代次数
          <number>、infinite(无限循环)
        animation-delay            动画延迟执行时间
          单位 s、ms 默认为零秒
        animation-derection        
          normal        (默认)正常播放
          reverse       播放帧的顺序反转，播放的起点为帧的结束
          atemate       播放帧的顺序交替反转，即第一次播放从帧的开始播放到帧的结束，第二次播放就从帧的结束播放到帧的开始
          alternate-reverse      与alternate类似，不过第一次播放时候需要反转
        animation-fill-mode    填充模式
          none        不改变默认行为，默认值
          forwards  在动画结束后，目标将保留在执行期间所遇到的最后一个关键帧所设置的计算值
          backwards    在延迟时间内，目标将保留在执行期间所遇到的第一个关键帧所设置的计算值。
          both    向前和向后填充模式都被应用
        animation-timing-function    动画的速度曲线
          ease            默认值，先快后慢
          linear        线性增长，匀速
          ease-in         先慢后快
          ease-out        先快后慢
          ease-in-out    先慢后快再慢

CSS过渡：transition

    div {
      transition: <property> <duration> <timing-function> <delay>;
   }
   transition-property          过渡属性
   transition-duration          持续时间
   transition- timing-function  时间速度曲线
   transition-delay             过渡延迟

  background    border    Box-shadow    flex    margin    padding
  color    font    text    opacity    visibility    z-index
  width    height    max-height    Max-width    Min-height    Min-width
  left    right    top    bottom    outline    

过渡和动画的区别：
    
    1.过渡需要触发
    2.不是所有属性都能过渡

CSS变形:transform

    rotate  旋转
       rotateX (angle)
        绕X轴旋转，例如单杠运动  30deg
      rotateY ( angle )
        绕Y轴旋转，例如钢管舞运动
      rotateZ ( angle )
        绕Z轴旋转，例如旋转盘。
      rotate ( angle )
        与rotateZ()一致。

    skew  倾斜
      skew(x,y)
      skewX(deg)
      skewY(deg)

    scale   缩放
      scale（x,y）
      scale(deg)
      scale(deg)

第三动画库安装

   1.安装：先把源码下载到本地

   2.使用语法
     <div class='animate_animated 动画类名'>hello</div>