Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
offset
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since setembro de 2022.
Experimental:Esta é umatecnologia experimental
Verifique atabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.
A propriedade CSSoffset é uma propriedade abreviada para animar um elemento ao longo de um caminho definido.
Nota:As primeiras versões da especificação chamam essa propriedade demotion.
| Initial value | as each of the properties of the shorthand:
|
|---|---|
| Aplica-se a | qualquer elemento transformavel |
| Inherited | não |
| Percentages | as each of the properties of the shorthand:
|
| Computed value | as each of the properties of the shorthand:
|
| Animation type | as each of the properties of the shorthand:
|
| Createsstacking context | yes |
Sintaxe
css
/* Posição do offset */offset: autooffset: 10px 30px;offset: none;/* Caminho do offset */offset: ray(45deg closest-side);offset: path(M 100 100 L 300 100 L 200 300 z);offset: url(arc.svg);/* Caminho do offset com distância e/ou rotação */offset: url(circle.svg) 100px;offset: url(circle.svg) 40%;offset: url(circle.svg) 30deg;offset: url(circle.svg) 50px 20deg;/* Incluindo âncora no offset */offset: ray(45deg closest-side) / 40px 20px;offset: url(arc.svg) 2cm / 0.5cm 3cm;offset: url(arc.svg) 30deg / 50px 100px;Sintaxe formal
offset =
[<'offset-position'>?[<'offset-path'>[<'offset-distance'>||<'offset-rotate'>]?]?]![ /<'offset-anchor'>]?
<offset-position> =
normal|
auto|
<position>
<offset-path> =
none|
<offset-path>||<coord-box>
<offset-distance> =
<length-percentage>
<offset-rotate> =
[auto|reverse]||
<angle>
<offset-anchor> =
auto|
<position>
<position> =
<position-one>|
<position-two>|
<position-four>
<offset-path> =
<ray()>|
<url>|
<basic-shape>
<coord-box> =
<paint-box>|
view-box
<length-percentage> =
<length>|
<percentage>
<position-one> =
left|
center|
right|
top|
bottom|
x-start|
x-end|
y-start|
y-end|
block-start|
block-end|
inline-start|
inline-end|
<length-percentage>
<position-two> =
[left|center|right|x-start|x-end]&&[top|center|bottom|y-start|y-end]|
[left|center|right|x-start|x-end|<length-percentage>][top|center|bottom|y-start|y-end|<length-percentage>]|
[block-start|center|block-end]&&[inline-start|center|inline-end]|
[start|center|end]{2}
<position-four> =
[[left|right|x-start|x-end]<length-percentage>]&&[[top|bottom|y-start|y-end]<length-percentage>]|
[[block-start|block-end]<length-percentage>]&&[[inline-start|inline-end]<length-percentage>]|
[[start|end]<length-percentage>]{2}
<ray()> =
ray(<angle>&&
<ray-size>?&&
contain?&&
[at<position>]?)
<paint-box> =
<visual-box>|
fill-box|
stroke-box
<ray-size> =
closest-side|
closest-corner|
farthest-side|
farthest-corner|
sides
<visual-box> =
content-box|
padding-box|
border-box
Exemplo
HTML
html
<div></div>CSS
css
@keyframes move { from { offset-distance: 0%; } to { offset-distance: 100%; }}#offsetElement { width: 50px; height: 50px; background-color: blue; offset: path("M 100 100 L 300 100 L 200 300 z") auto; animation: move 3s linear infinite;}Resultado
Especificações
| Specification |
|---|
| Motion Path Module Level 1 # offset-shorthand |