CSS3のTransitionとAnimationのメリットデメリットって

これのエントリーの前に書いているAnimation。
使いやすいけど弱点をすごく感じた。

それはスクロールに合わせてClassを追加したり削除したりするときの挙動。

Animationはアニメが0%~100%の間で細かい指定が出来るので凝ったアニメが実現出来る。
が、いざそのアニメーションが関連付けされたClassを削除すると一気に元の状態に戻ってしまう。

簡単な例としてOpacityを0⇔1にしたくても0から1はAnimationが効くが、Classが外された際に一気に0つまりパっと消えてしまう。

その点TransitionはClassが付与されたとき、削除されたときに指定したアニメーションを行き来してくれるのでそう行ったことが起こらない。

あまり検証していない上でのインプレッションでした。