CSS/animationプロパティ

animation-name 要素に適用するキーフレームアニメーションを指定するプロパティ。 キーフレームアニメーションは@keyframesで定義する必要がある。
animation-duration アニメーション開始から終了までの所要時間を指定するプロパティ
animation-timing-function プロパティの値は定義済みの値(ease、linear、ease-in等)かcubic-bezier()で指定する
animation-delay アニメーションが開始するまでの遅延時間を指定するプロパティ
animation-iteration-count アニメーションのループ回数を指定するプロパティ。 infiniteを指定すると無限ループする
animation-direction アニメーションの再生方向を指定するプロパティ。
animation-fill-mode キーフレームアニメーションで指定したプロパティを アニメーション開始前、終了後に適用するかどうかを指定するプロパティ
animation-play-state アニメーションを再生中か一時停止にするプロパティ
duration
5s
10s
timing-function
ease
linear
ease-in
ease-out
delay
0s
0.5s
iteration-count
infinite
2
direction
normal
reverse
alternate
alternate-reverse

normal: 0% → 100% ⇒ 0% →

reverse: 100% → 0% ⇒ 100% →

alternate: 0% → 100% ⇒ 100% → 0% ⇒ 0% →

alternate-reverse: 100% → 0% ⇒ 0% → 100% ⇒ 100% →

fill-mode
none
forwards
backwords
both

forwards: 終了時の状態

alternate: 開始時の状態

alternate-reverse: 終了時の状態

play-state
play-atate

running: 再生

paused: 一時停止

$("#play-state").click(function(){
  $(this).toggleClass("play-state");
});