[jQuery]BxSliderで画像をズームアウトさせながらスライドさせる

経緯

表題の動きをしようと思ったけど参考サイトのJS覗いたら処理が難しすぎてハァ？ってなったのでもっと簡単にできるだろ！！！と思って考えた結果。プラグインの機能の範囲で済ましてるし自分ではこっちのが良い。
※この記事はSlickでやろうとした結果挫折した記事の続きです。

要点

• ズームアウトの動きは CSSのAnimation
• movingクラスにズームアウトするアニメーションを呼び出し
• BxSliderは普通に呼び出すだけ。難しいことしない。

CSS

スライド内のliに

0% → transform: scale(1.2)
100% → transform: scale(1)

という感じで最初が大きくもとに戻っていくCSSアニメーションを適用する。

親要素のoverflowはhiddenで。後は普通にスライドしたらOK。多分動く。