Front-end animation through CSS Animation

@keyframes <animation> {
  [<animation> {
    /* CSS Properties */
  }]*
}</animation></animation>

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

// 命名需要遵循以下规则
const rIsInvalid = /^--|^[0-9]+-|^(?:unset|initial|inherit|none)$/
    , rIsValid = /^[0-9a-z-_\\]+$/i
function isValidAnimationName(animationName: string): boolean{
  return !rIsInvalid.test(animationName) && rIsValid(animationName)
}

/* 无效 */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* 生效 */
@keyframes rotate {
  from { transform: rotate(90deg); }
  to { transform: rotate(-360deg); }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  from { background: red; }
  /* 上述两条time offset实际上等价于
   * from { transform: rotate(0deg); background: red; }
   */
  to {
    transform: rotate(360deg);
    background: yellow;
  }
}

@keyframes rotate {
  from {
    transform: rotate(90deg);
    background: red!important; /* background属性无效 */
  }
  to { transform: rotate(-360deg); }
}

/* 不会根据缓动函数产生动画效果，而是在动画持续时间的最后瞬间移动过去 */
@keyframes move-left{
   to {
       left: 100px;
   }
}

<css-selector> {
  animation: <animation-name>
             <animation-duration>
             <animation-timing-function>
             <animation-delay>
             <animation-iteration-count>
             <animation-direction>
             <animation-fill-mode>
             <animation-play-state>;
}</animation-play-state></animation-fill-mode></animation-direction></animation-iteration-count></animation-delay></animation-timing-function></animation-duration></animation-name></css-selector>

.box.rotate {
  animation: rotate 10s infinite alternate;
}

/* 通过设置在一个动画周期内(<animation-duration>)的平均刷新帧数，实现突变动效。具体应用有：游戏精灵行走、打字效果等
 * <number_of_steps> - 两个关键帧间的刷新次数
 * <direction> - 方向，可选值为 end | start。
 *               end为默认值，表示动画一结束，动画效果就结束;
 *               start表示动画一开始就马上执行完第一个关键帧的效果。
 */
steps(<number_of_steps>, <direction>)</direction></number_of_steps></direction></number_of_steps></animation-duration>

const target = document.getElementById("target")
target.addEventListener("animationstart", e => {
  // 动画开始时触发
})
target.addEventListener("animationiteration", e => {
  // 每次重复执行动画时触发
  // 当<animation-iteration-count>为1时，不会触发。
})
target.addEventListener("animationend", e => {
  // 当动画结束时触发
})</animation-iteration-count>

function pause (target: HTMLElement):boolean {
  const isRunning = target.style.animationPlayState == "running"
  if (isRunning) {
    target.style.animationPlayState = "paused"
  }
  
  return isRunning
}

function play (target: HTMLElement):boolean {
  const isStop = target.style.animationPlayState == "paused"
  if (isStop) {
    target.style.animationPlayState = "running"
  }
  
  return isStop
}

function replay (target: HTMLElement, animationClassName: string):void {
  // 先移除动画效果
  target.classList.remove(animationName)
  // requestAnimationFrame的回调函数会在下一次界面渲染前执行
  requestAnimationFrame(_ => {
    // 这时动画的影响还在，所以要等界面渲染完后再重新启用动画效果，才能实现重播
    requestAnimationFrame(_ => {
      target.classList.add(animationName)
    })
  })
}