CSS动画

动画：

  transfprmm 2D变形设置网页元素样式

  transition制作过度动画 ：

  property过度或动态模拟css属性  
  duration：过度需要的时间  
  timing-function过度函数

  delay过度开始出现的延迟时间

  all：时间又快到慢

  ease：速度又快到慢（默认值）

  linear：速度恒速（匀速运动）

  ease-in：速度越来越快

  ease-out：速度越来越慢

  ease-in-out:速度先加速在减速

  伪类触发：

  hove

  active  
  focus

  checked

  媒体查询：通过@media属性判断设备的尺寸，方向等

  JavaScript触发：用JavaScript脚本触发

  animation制作网页动画

  变形函数：

  translate（）：平移函数，基于X,Y坐标重新定位元素的位置

  scale（）：缩放函数，可以使任意元素对象尺寸发生变化

  rotate（）：旋转函数，取值是一个度数值

  skew（）：倾斜函数，取值是一个度数值

================================================

animation(动画）

  1.声明关键帧（帧就是一个个画面）

  @keyframes{

    //声明内容

  0%{         //样式

    }

  50%{  //样式

    }

  }

  2.调用关键帧{

      animation-name：动画名字

  animation-duration：动画时间

  animation-timing-function：动画方式

  animation-delay：延迟时间

  animation-iteration-count：播放次数

  animation-direction：播放方向

  animation-play-state：动画的播放状态

  animation-fill-mode：动画开始之前和结束之后发生的操作


2D变形：transform

  可以控制元素的旋转、平移、倾斜、缩放的一系列集合的

  效果

   2d旋转：transform：rotate（旋转度数）

   2d平移：transform：translate（100px，0）

  第一个参数为x轴平移（正数往右，负数往左）

  第二个参数为y轴平移值（正数往下，负数往上）

     只往x轴进行平移：transform：translate X（像素值）

     只往y轴进行平移：transform：translate y（像素值）

   2d的倾斜：transform：skew（x，y 倾斜度数）

     x轴的倾斜:transform：skew X(）；

     y轴的倾斜:transform：skew Y(）；

   2d缩放：transform: scale(2，0)取值的小数0-1之间代表缩小

     只往x轴进行缩放：transform: scale X(倍数);

     只往y轴进行缩放：transform: scale Y(倍数);



   css3的过渡（transition）：

  一种元素形态转换为另一种元素形态的过程

  transition：过渡的2d编形 过渡时间  过渡方式  过渡等待时间；

    第一个：一般写all表示所有，还可以写2d函数

    第二个：一般单位为s，过渡的时间

    第三个：ease默认过渡（由快到慢）

    linear：匀速过渡

    ease-in：越来越快

    ease-out：越来越慢

    ease-in-out：先加速在减速

    第四个;一般单位s，等待时间

  第一步：添加触发的方式

  例：鼠标悬浮触发  标签：hover{过渡后的2d变形}

      active：点击时

      focus：获取焦点

      checked:被选中时

      媒体查询

      Java Script触发

  第二步：在相应的元素中添加  transition：all 2s ease 0s；

css动画：

  1.设置关键帧

  @keyframes donghua{

            10%{

                width: 20px;

            }

            100%{

               width: 500px;

            }

        }

   动画的形成是由每一帧图像演变而来的

  2.动画的调用

  animation: donghua 5s linear 0s infinite;

   第一个参数：动画的名称

    第二个参数：动画执行的时间

   第三个参数：动画执行的方式

   第四个参数：等待时间

   第五个参数：默认为一次，information无限次数