CSS 动画学习

css3动画平时没有什么机会用到， 最近刚好有项目需要用到大量的动画，就此记录一下。

animation

animation属性用来指定一组或多组动画，每组之间用逗号间隔。（amazing！ 居然还能指定多组动画，小菜鸡的我一直只用一组动画）

animation 有如下属性值

animation-name: 定义的动画帧名称
animation-duration: 动画持续时间
animation-timing-function: 每一动画执行节奏
animation-delay: 动画何时开始
animation-iteration-count: 动画执行次数
animation-fill-mode: 动画执行之前和之后如何应用样式于目标
animation-play-state: 动画的暂停与播放

属性用法

animation-name

animation-name用来指定应用的一系列动画，通常是@keyframes定义的名称 @keyframes 可以定义关键帧的样式来控制css动画的中间步骤。

可以使用from/to和百分比来表示中间步骤：

@keyframes test {
  from{
    transform: translate(0, 0);
  }
  to{
    transform: translate(0, 100%);
  }
}
@keyframes test {
  0%{
    transform: translate(0, 0);
  }
  50%{
    transform: translate(0, 50%);
  }
  100%{
    transform: translate(0, 100%);
  }
}

animation-duration & animation-delay

animation-duration是动画持续的时间，animation-delay是动画延迟多少时间开始执行，为什么将这两个放一起呢，因为在用简写的时候，也就是animation: xxx xxx xxx xxx xxx这种形式，可以被解析为[time]的，第一个值分配给animation-duration，第二个值分配给animation-delay，我们来验证一下是不是

 @keyframes identifier {
    from{
      transform: translate(0, 0);
    }
    to{
      transform: translate(200px, 0);
    }
  }
  .test1 {
    width: 100px;
    height: 100px;
    background-color: #61dafb;
    animation: identifier 2s 1s;
  }
  .test2 {
    width: 100px;
    height: 100px;
    background-color: antiquewhite;
    animation: identifier 2s;
  }

效果还真是，MDN诚不欺我～ 那我换下位置看还能识别吗

 .test1 {
    animation: 1s identifier 2s;
  }
  .test2 {
    animation: identifier 2s;
  }

杠杠的没毛病，所以结论是缩写的时候，时间的位置可以随便写，第一个会被识别为animation-duration，第二个会被识别为animation-delay

animation-timing-function

待续。。。