animation、@keyframes动画的使用

<transition name="fade">
   <div>...</div>
</transition>

.fade-enter-active {
  animation: fadeIn 0.4s;       // name duration
}
.fade-leave-active {
  animation: fadeOut 0.4s;
}

@keyframes fadeIn {           // form起始时,等同于0%，to到达终点时，等同于100%
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

• animation属性说明：
  animation: name duration timing-function delay iteration-count direction;

属性	描述
animation-name	要绑定的 keyframes 动画名称
animateion-duration	完成动画所需的时间，以秒或毫秒计算
animateion-timing-function	动画的速度曲线（linear、ease、ease-in、ease-out…）
animateion-delay	动画开始之前是否延迟时间
animateion-iteration-count	动画播放次数 (n、infinite)
animation-direction	定义正向、反向播放动画 (normal、alternate)