CSS モーションパス
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
モーションパス (Motion Path) は CSS のモジュールの一つで、任意のグラフィックオブジェクトを独自の経路に沿って動作させるためのものです。
この概念は、ある経路に従って動作する要素をアニメーションさせたい場合、以前は裁量権がアニメーションの推移や位置などしかなかったのですが、これは理想的はなく、単純な動作しかできませんでした。 offset-path
によって、任意の形状の特定の経路を定義することができます。そして、 offset-distance
により経路に沿って動かすことができ、 offset-rotate
を用いて任意の位置での向きを選択することができます。
基本的な例
html
<div id="motion-demo"></div>
css
#motion-demo {
offset-path: path("M20,20 C20,100 200,0 200,100");
animation: move 3000ms infinite alternate ease-in-out;
width: 40px;
height: 40px;
background: cyan;
}
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
リファレンス
プロパティ
仕様書
Specification |
---|
Motion Path Module Level 1 # offset-path-property |
ブラウザーの互換性
offset プロパティ
BCD tables only load in the browser