offset-position
Experimental
これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
offset-position
は CSS のプロパティで、 offset-path
の初期位置を定義します。
構文
/* キーワード値 */
offset-position: auto;
offset-position: top;
offset-position: bottom;
offset-position: left;
offset-position: right;
offset-position: center;
/* <percentage> 値 */
offset-position: 25% 75%;
/* <length> 値 */
offset-position: 0 0;
offset-position: 1cm 2cm;
offset-position: 10ch 8em;
/* 辺とオフセット値 */
offset-position: bottom 10px right 20px;
offset-position: right 3em bottom 10px;
offset-position: bottom 10px right;
offset-position: top right 10px;
/* グローバル値 */
offset-position: inherit;
offset-position: initial;
offset-position: unset;
値
auto
- 初期位置は
position
プロパティで指定されたボックスの位置です。 <position>
<position>
です。位置は x/y 座標を定義し、要素のボックスの辺から相対的にアイテムを配置します。1つから4つの値を使って定義することができます。キーワード以外の値を2つ指定した場合、1つ目の値は水平方向の位置を、2つ目の値は垂直方向の位置を表します。1つの値のみを指定した場合は、2番目の値はcenter
とみなされます。3 つまたは 4 つの値が使用される場合、長さとパーセントの値は、前のキーワード値からのオフセットとなります。これらの値タイプの詳細については、background-position
を参照してください。
公式定義
初期値 | auto |
---|---|
適用対象 | 変形可能要素 |
継承 | なし |
パーセント値 | referToSizeOfContainingBlock |
計算値 | length の場合は絶対的な値、それ以外の場合はパーセント値 |
アニメーションの種類 | position |
形式文法
auto | <position>ここで
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
ここで
<length-percentage> = <length> | <percentage>
例
初期オフセット位置の設定
<div id="motion-demo"></div>
#motion-demo {
offset-path: path('M20,20 C20,100 200,0 200,100');
offset-position: left top;
animation: move 3000ms infinite alternate ease-in-out;
width: 40px;
height: 40px;
background: cyan;
}
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
Motion Path Module Level 1 offset-position の定義 |
草案 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser