3次ベジェ曲線を使った要素の曲線移動(アニメーション)

3次ベジェ曲線を使った要素の曲線移動(アニメーション)の方法をご紹介します。

デモ

次のデモは、始点を左下、終点を右上、制御点1を下中央、制御点2を右中央にした動きです。

 

 

 

 

 

サンプルコード

HTML

CSS

JavaScript