offset-distance
は CSS プロパティで、 offset-path
上の要素を配置する位置を指定します。
構文
/* 既定値 */
offset-distance: 0;
/* offset-path の途中 */
offset-distance: 50%;
/* パス上の固定距離の位置 */
offset-distance: 40px;
<length-percentage>
- 要素が (
offset-path
で定義された) パス上のどのくらいの距離にあるかを指定する長さです。 - 100% はパスの全長を表します。 (
offset-path
が基本シェイプまたはpath()
として定義されている場合)。
形式文法
<length-percentage>where
<length-percentage> = <length> | <percentage>
例
CSS モーションパスのモーションアスペクトは、一般に offset-distance
プロパティのアニメーションから来ています。要素をパス全体の上でアニメーションさせたい場合は、その offset-path
を定義し、 offset-distance
に 0%
から 100%
までを取るアニメーションを設定してください。
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%;
}
}
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
Motion Path Module Level 1 offset-distance の定義 |
草案 | 初回定義 |
初期値 | 0 |
---|---|
適用対象 | 変形可能要素 |
継承 | なし |
パーセンテージ | refer to the total path length |
計算値 | length の場合は絶対的な値、さもなくばパーセンテージ |
アニメーションの種類 | length または percentage, calc(); |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。