day13 CSS3动画（animation）

CSS3 @keyframes 规则

@keyframes 规则是创建动画，在该规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

animation：所有动画属性的简写属性。

animation-name：规定 @keyframes 动画的名称。

animation-duration： 规定动画完成一个周期所花费的秒或毫秒。默认是 0。

animation-timing-function：规定动画的速度曲线。默认是 "ease"。

animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

animation-delay：规定动画何时开始。默认是 0。

animation-iteration-count：规定动画被播放的次数。默认是 1。

animation-direction：规定动画是否在下一周期逆向地播放。默认是 "normal"。

animation-play-state：规定动画是否正在运行或暂停。默认是 "running"。

animation-direction：属性定义是否循环交替反向播放动画。
注意：如果动画被设置为只播放一次，该属性将不起作用。
normal：默认值。动画按正常播放。
reverse：动画反向播放。
alternate：动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
alternate-reverse：动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。

@charset "UTF-8";
body {
  background-color: black;
  color: darkblue;
  font-size: 18px;
}

#ani1 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: lightblue;
  animation-name: anione;
  animation-duration: 5s;
  /* animation-delay: 2s; */
  animation-direction: alternate;
  animation-play-state: running;
  animation-iteration-count: infinite;
}

@keyframes anione {
  0% {
    background-color: pink;
  }
  25% {
    background-color: lightblue;
    width: 25%;
  }
  50% {
    background-color: lightgreen;
    width: 50%;
  }
  75% {
    background-color: plum;
    width: 75%;
  }
  100% {
    background-color: lightcoral;
    width: 100%;
  }

}

以下为某一个状态，动态图可以自己看。
该方形元素的背景色会从粉色逐渐过渡到浅珊瑚色，同时宽度从0逐渐增加到100%。动画持续时间为5秒，每次循环播放时会交替反向进行，无限循环。