CSS offset 属性

定義と使用法

offset 属性は要素をパスに沿ってアニメーション化するために使用され、以下の属性のショートカット形式です：

設定について offset 属性値の異なる設定方法については、以下の詳細な例を参照してください。

例

例 1

使用 offset ショートカット属性として <img> 要素に offset-path、offset-distance そして offset-rotate の属性値を設定します：

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px auto 45deg;
}

実際に試してみてください

例 2：offset-path と offset-rotate

<img>要素を使用して offset 属性 setting offset-path と offset-rotate の属性値を設定します：

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 45deg;
}

実際に試してみてください

例 3：offset-path と offset-distance

<img>要素を使用して offset 属性 setting offset-path と offset-distance の属性値を設定します：

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px;
}

実際に試してみてください

例4：offset-path、offset-distance、offset-rotate、offset-anchor

<img>要素を使用して offset offset-path、offset-distance、offset-rotate、offset-anchorの属性値を設定する属性：

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px -90deg / 0% 50%;
}

実際に試してみてください

CSS 文法

offset: auto|value|initial|inherit;

属性値

値 説明
auto デフォルト。各個別の 'offset-' プロパティのデフォルト値を参照してください。
offset-anchor 指定された要素上にアニメーションパス上に固定されたポイントを指定します。デフォルト値は auto です。
offset-distance offset-path で定義されたパスの起点からの距離を指定します。デフォルト値は 0 です。
offset-path 指定された要素がアニメーション化するパスを指定します。デフォルト値は none です。
offset-position 指定された要素がパス上の初期位置を指定します。デフォルト値は normal です。
offset-rotate 指定された要素がパスに沿ってアニメーション化する際の回転角度を指定します。デフォルト値は auto です。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit 親要素からこの属性を継承します。参照してください inherit。

技術的詳細

デフォルト値： 各個別プロパティのデフォルト値を参照してください
継承性： いいえ
アニメーション作成： サポート。参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript 文法： object.style.offset="path('M 50,250 C 700,-50 -400,-50 250,250') 200px auto 90deg"

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
55 79 72 16 42

関連ページ

チュートリアル：SVG パス

チュートリアル：CSS アニメーション

参照：CSS offset 属性

参照：CSS offset-anchor 属性

参照：CSS offset-distance 属性

参照：CSS offset-path 属性

参照：CSS offset-position 属性

参照：CSS offset-rotate 属性