Atributo offset-path de CSS

Definición y uso

offset-path La propiedad se utiliza para crear una ruta para el elemento animado.

Ejemplo

Cree una ruta para la animación <div>:

div {
  offset-path: path('M20,170 L100,20 L180,100 Z');
  animation: moveDiv 3s 3;
}
@keyframes moveDiv {
  100% { offset-distance: 100%; }
}

Pruebe usted mismo

Sintaxis de CSS

offset-path: none|path()|ray()|url()|basic-shape|cord-box|initial|inherit;

Valor del atributo

Valor Descripción
none Predeterminado. Valor predeterminado del atributo offset-path del elemento.
path() Especifique la ruta utilizando la sintaxis SVG. Vea:Rutas de SVG.
ray() Especifique la ruta utilizando la función CSS ray().
url() Especifique la ruta utilizando la URL de un archivo SVG.
<basic-shape> Defina formas básicas utilizando funciones de CSS (como inset(), circle(), ellipse() o polygon()) para especificar la ruta.
<coord-box> Especifique la ruta utilizando un cuadro de coordenadas.
initial Establezca este atributo en su valor predeterminado. Vea: initial.
inherit Hereda este atributo del elemento padre. Vea: inherit.

Detalles técnicos

Valor predeterminado: none
Herencia: No
Producción de animación: Compatibilidad. Consulte:Atributos relacionados con la animación.
Versión: CSS3
Sintaxis de JavaScript: object.style.offsetPath="path('M20,170 L100,20 L180,100 Z')"

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite completamente la propiedad.

Chrome Edge Firefox Safari Opera
55 79 72 15.4 45

páginas relacionadas

Tutoriales:Rutas de SVG

Tutoriales:Animaciones de CSS

Referencia:Atributo offset de CSS

Referencia:Atributo offset-anchor de CSS

Referencia:Atributo offset-distance de CSS

Referencia:Atributo offset-position de CSS

Referencia:Atributo offset-rotate de CSS