2023年7月10日CSS,JavaScript,アニメーション,デザインパターンアニメーションの実装はややこしいからCSS Transitionでできなければ実装したくない、そう思っていませんか?FLIPというテクニックを使うことで、CSS Transitionだけでは実装できないケースでも簡単にアニメーションを実装することができます。 FLIPとは #FLIP とは First, Last, Invert, Play の頭文字から取られた用語であり、アニメーションをこの4つのステップに分割して行うテクニックです。例えば、以下のようなリストの項目に追加、削除、並べかえができるUIに対して、簡単にアニメーションを付けることができます。 上のデモで追加、削除、並べかえを行った時に、項目の座標移動がアニメーションすることがわかると思います。これは CSS Transition だけでは実装する
![アニメーションの実装が劇的に簡単になるFLIPテクニック - Katashin .info](https://cdn-ak-scissors.b.st-hatena.com/image/square/f4123dc8a3cfce9a394071143aac0655281a824c/height=288;version=1;width=512/https%3A%2F%2Fkatashin.info%2Fimg%2Flogo.png)