UPDATE：2023.6.30
- CATEGORY
CSSのモーションパスで簡単に好きな軌道でアニメーションを動かす
最近、一歳になった息子が電車に興味津々です。そこで電車をCSSアニメーションで作れないか調べたところ、
モーションパス (Motion Path)で簡単に好きな経路で対象を動かすアニメーションが作れると知りました。
▼作ってみた電車のアニメーションがこちら
（若干コードが汚いので参考程度に見てください；）
線路がガタガタで周囲の景観も不穏ですが、一先ず電車が走っていますね！
見せたら息子も喜んでくれました。
（とくに電車が『くるっ！』と回転する部分が好きなようでした）
モーションパスとは
モーションパス (Motion Path) は CSS のモジュールの一つで、任意のグラフィックオブジェクトを独自の経路に沿って動作させるためのものです。
線路に沿って進む電車のように、モーションパスを使えば容易に自由な経路でオブジェクトを動かすことができます。
基本的な記述方法
① offset-pathで動かす経路を設定する
動かす対象に対してoffset-pathプロパティを設定します。offset-path プロパティには任意の形状の動かしたい形の経路をpath()で定義します。
path()はillustratorなどを利用してSVG画像を書き出して利用すると容易に書き出せます。
書き出したSVG画像をコードエディタで開き、
例：
offset-path: path(‘※ここにコピペ’);
↓
offset-path: path(‘M20,20 C20,100 200,0 200,100’);
offset-path: path(‘※ここにコピペ’);
↓
offset-path: path(‘M20,20 C20,100 200,0 200,100’);
これで対象を動かす経路が設定できました。
実際に動かすにはoffset-distanceプロパティの設定が必要になります。
② offset-distanceで対象を動かす
offset-distanceプロパティはoffset-path上の要素を配置する位置を指定するプロパティです。animationプロパティと組み合わせれば、配置する位置を変えることでアニメーションさせることができます。
例：
animation: move 10s linear infinite;
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
animation: move 10s linear infinite;
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
こんな感じでcssを準備して動かしたのが例の電車です。
とても簡単に対象を動かすアニメーションを実装できるモーションパスですが、
まだブラウザでサポートしていないプロパティもあるので利用には注意が必要です。
実装の手軽さゆえに活用できる場面が増えればいいなと思います。
CSS モーションパス
offset-path: path(‘M20,20 C20,100 200,0 200,100’);