css3之动画属性transform、transition、animation

工作当中，会遇到很多有趣的小动画，使用css3代替js会节省工作量，css3一些属性浏览器会出现不兼容，加浏览器的内核前缀 -moz-、 -webkit-、 -o-

1、transform

rotate表示顺时针旋转的角度，负数表示逆时针旋转的方向，单位deg

{
    transform: rotate(30deg);
}

scale表示延x轴和y轴放大的或缩小的倍数，默认是1，无单位

{
    transform: scale(x);
    transform: scale(x,y);
}

translate表示延x轴和y轴平移的距离，带px单位

{
    transform:translate(20px,20px);
}

2、transition

transition:perperty duration timing-function delay

多个属性可以用，分隔

perperty：css属性|all。

duration 默认值0。

timing-function

1. ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2. linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3. ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4. ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5. ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6. cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

{
    transition：opacity 1s ease-in, width 2s ease-out;
}

3、animation

animation:NAME duration timing-function delay 用法同transition

@keyframes 是动画的一个生命周期，记录每帧的属性改变效果

.div{
    animation:NAME 1s ease-in
}
@keyframes NAME {
         0% {
         }
         20% {
         }
         ...
         100% {
         }
}

案例 fade-in动画

  .fade-in:hover{
    animation: fade-in 1s ease-in;
  }
  @keyframes fade-in {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity:1;
    }
  }
  <div class="box">

  </div>