CSS3动画

css3动画包括过渡，形变，动画

过渡transition：

     从一种状态（css效果）效果缓慢进入另一种状态（css效果）
    transition可以写在原始状态和目标状态中，
    写在目标状态中，原始状态不会过渡，写在原始状态中可以两个状态都过渡

指定过渡样式：transition-property

     none：没有样式需要过渡
     all：代表所有样式需要过渡        默认值
      propertys：代表需要过渡的样式列表
                        样式名称与样式名称之间用逗号隔开

过渡时间：transition-duration

    单位：s/ms      秒/毫秒        1s=1000ms
    默认    0s      没有过渡

过渡变换的速度函数：transition-timing-function

    linear：从开始到结尾都是匀速过渡
    ease-in：从慢到块
    ease-out：从快到慢
    ease-in-out：从慢到快再从快到慢
    ease

过渡延迟时间：transition-delay

      单位：s/ms      秒/毫秒        1s=1000ms
    默认    0s      没有延迟时间

transition:duration delay property timing-function

  过渡时间与延迟时间同时存在时，第一个时间代表过渡时间，
          第二个时间代表延迟时间
  必须写过渡时间，否则不会有过渡效果

形变transform：位置，旋转，缩放，倾斜

  transform：形变函数（参数）
  2D/3D
  transform-origin：形变的参照点
          关键字
                水平          left   center   right
                垂直          top   center   bottom
                只写一个方向，另一个方向默认为center
                px
                %

transform:形变函数

  形变函数之间用空格隔开
  形变函数之中的参数用逗号隔开
  形变函数可以同时存在多个

注意：一个选择器中不能有多个transform，使用最后一个

形变与过渡结合时
尽量保持，元素形变函数和目标样式的形变函数一致
scale，会影响过渡效果的有无

2D

      位置：translate
            translateY（m）：Y轴移动，单位px    正下负上

            translateX（m）：X轴移动，单位px    正右负左

            translate（x,y）：
                                只有一个值：代表X轴移动
                                两个值：同时X轴和Y轴移动

旋转：rotate

      rotate(ndeg)    单位deg-角度
                      正数：沿z轴顺时针旋转
                      负数：沿z轴逆时针旋转

缩放scale

    scale(m)：
            0~ 1：缩小
            1~   ：放大
            ~0   ：反转缩放

            1个值：水平垂直方向同时放大缩小
            2个值：x,y方向按指定值大小进行放大缩小

    scaleX(m) ：水平方向缩放
    scaleY（m）：垂直方向缩放

倾斜skew

  skewX(m)：沿x轴倾斜，正值 ：上左 下右，负值 ：上右下左
  skewY(m)：沿y轴倾斜，正值 ：左上右下， 负值 ：右上下左
  skew(m,n): 
        1个值：沿x轴方向倾斜
        2个值：同时沿x轴，y轴倾斜

3D

perspective：视距、代表默认情况下物体离眼睛的距离

    位置：translateZ(m)：Z轴平移
                                    正值：物体越来越靠近眼睛，超过视距则看不见
                                    负值：物体越来越远离眼睛，值越小，物体越来越小
    旋转：
          rotateX()：沿着X轴旋转
          rotateY()：沿着Y轴旋转
          rotateZ()：沿着Z轴旋转
          rotate3d()：

          需要在3D状态下才有更好的效果

    transform-style：设置当前元素是否具有3D空间
                preserve-3d：具有3D空间，子元素有3D效果
                flat：平面，子元素没有3D效果

    缩放：
          scaleZ(m)：让本身子元素，在Z轴上伸缩
                  本身的厚度不会发生任何改变

动画

1.创建动画片段

    @keyframes 动画片段名称{
              from{原始样式}
                to{目标样式}
            }

    @keyframes 动画片段名称{
             0%{样式}
           50%{样式}
           75%{样式}
         100%{样式}
            } 

            百分数：0~100，一次动画时间中的占比

2.执行动画

      animation-name:动画片段名称

      animation-duration:一次动画的时间

      animation-iteration-count:一次动画的时间
                            infinite:无数次

      animation-direction:动画执行的方向
                            normal：正常情况，从from到to
                            reverse：反向          从to到from
                            alternate：正反向，来回执行，从from到to，to到from
                            alternate-reverse：从to到from  from到to

      animation-timing-function:动画执行的速度函数
                            linear    ease-in    ease-out    ease-in-out    ease

      animation-play-state:动画执行的状态
                            running：执行动画
                            paused：暂停动画
      简写：
      animation：name duration  delay  direction  timing-function play-state
      不能省略name  duration

      animation：动画信息项，动画信息项，动画信息项
            可以同时播放多个动画片段