JavaScriptからCSSでanimationするときの注意点

CSS3のanimationプロパティからキーフレームアニメーションを一括して指定する事が出来る。何処の説明を見てもanimation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-directionの6つを指定出来ると書いてあるが実際はanimation-play-stateも設定される。outerHTML辺りでどんな指定になってるか見てみるといい。animation-play-state=runningもあるはず。さて、これの何が問題かというと

node.animationPlayState = "paused";

からアニメーションを止める時。別途指定してもanimationで一括指定した物が生きているのでアニメーションが止まらない。面倒でも必ずanimationは使わず各プロパティを丁寧に指定する事。