css动画

面试过程中，被问到动画的理解，自己没回答好，准备查漏补缺一下css的动画部分。

1.首先需要定义一个动画。

/*命名一个动画名字，这里为animationName*/
@keyframes animationName {
}

2.定义某个时刻的状态。

@keyframes animationName {
  0% {
    width: 100px;
    height: 100px;
  }

  25% {
    width: 200px;
    height: 200px;
  }

  50% {
    width: 300px;
    height: 300px;
  }

  75% {
    width: 200px;
    height: 200px;
  }

  100% {
    width: 100px;
    height: 100px;
  }
}

3.应用到某个元素上。

使用animation-name属性标识。

#div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  /*别忘了使用animation-name属性标识为应用动画名称*/
  animation-name: animationName;
}

4.其他属性

（1）animation-duration

animation-duration定义动画时间长度。

继续完善上面的代码！

#div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  /*别忘了使用animation-name属性标识为应用动画名称*/
  animation-name: animationName;
  /*动画持续5s中*/
  animation-duration: 5s;
}

（2）animation-timing-function

animation-timing-function定义动画的类型。

（3）animation-iteration-count

animation-iteration-count定义动画的次数。指定动画持续的次数。

也可使用infinite，无穷次。就会一直执行。如果是个固定次数就持续多少次后停止。

（4）animation-direction

animation-direction定义动画的方向，比如可以返回原状态：reverse。

（4） animation-play-state

设置动画的状态，可以将动画停止或继续。 暂停为paused。继续为running。

<br>
  <button onclick ="stop()">暂停</button>   <button onclick="running()">继续</button>
  <div id ="div"></div>
</body>
<script>
  let div  = document.getElementById("div");
  function stop(){
    div.style.animationPlayState = "paused";
  }
  function running(){
    div.style.animationPlayState = "running"
  }
</script>