IEやEdge、Androidの一部のブラウザでは:before、:after擬似要素にtransitionやanimationをかけると、その要素がスムーズにアニメーションしなかったり、あるいは周辺の要素に同時にアニメーションを付加していた場合に動きがおかしくなったりする現象が見られることがある。
解決方法は2つあり、
- transitionの場合にはtransition-propertyをできるだけ限定する（allにしない）こと
- 擬似要素ではなく素直にdivなどの新しい要素でアニメーションさせること
が挙げられる。
ひとつめはブラウザの負荷を下げるということで納得できるが、もうひとつは擬似要素のほうがレンダリング負荷が高いということだろうか？
普通の要素と擬似要素はブラウザの解釈の仕方が違い（IEではline-heightにremを使うと擬似要素のみバグったりすることもあるので）からくるものなのか？
謎だが、もしお困りの方がいましたら是非試してください。
2018年11月12日追記：
IEはCSSのtransitionやanimationを使うよりもDOMを直接書き換えたアニメーションのほうがスムーズに見えることが多い。
これはClassの切り替えよりもDOM操作のほうがアニメーション実行速度が早くなるブラウザ上のパフォーマンスと一緒のようだ。
CSSでアニメーションがうまく動かなければ、DOM操作を直接試してみるとうまく動く可能性がある。