Propiedad CSS offset-path
Usa la propiedad CSS offset-path para definir el camino que sigue un elemento. Conoce los valores y prueba ejemplos.
La propiedad CSS offset-path define un camino geométrico a lo largo del cual se puede posicionar y mover un elemento. Forma parte del Motion Path Module, un conjunto de propiedades CSS que permiten animar un elemento a lo largo de un camino arbitrario — una curva, una línea o el contorno de una figura SVG — sin estar limitado a transiciones rectas de top/left.
Por sí sola, offset-path solo describe la pista. La ubicación real del elemento a lo largo de esa pista se establece con la propiedad offset-distance (0% = inicio del camino, 100% = final). Animar offset-distance de 0% a 100% es lo que hace que el elemento recorra el camino.
¿Cuándo usarla?
Usa offset-path cuando quieras un movimiento que siga una curva real y que sería difícil de expresar con pasos de transform: translate() en fotogramas clave — por ejemplo, un planeta orbitando en una elipse, un marcador deslizándose por una carretera sinuosa, o un icono recorriendo un logotipo SVG. Como el navegador interpola la posición a lo largo del camino, el movimiento se mantiene fluido sin importar la complejidad de la curva.
En el borrador anterior de la especificación, esta propiedad se llamaba motion-path. Se renombró a offset-path porque la propiedad define posiciones estáticas en un camino (la animación proviene de offset-distance), y los nombres antiguos motion-* están ahora obsoletos.
La propiedad offset-path en sí no es animable — solo define el camino. El movimiento se produce animando offset-distance (normalmente con una regla @keyframes), mientras que offset-rotate controla si el elemento gira para orientarse en la dirección del movimiento.
Si has definido offset-path en CSS, también puedes controlar el movimiento desde JavaScript actualizando offset-distance a lo largo del tiempo.
Propiedades offset relacionadas
El módulo Motion Path funciona como una pequeña familia de propiedades — offset-path es el centro:
- offset-distance — hasta qué punto del camino se encuentra el elemento.
- offset-rotate — si el elemento rota para seguir la dirección del camino.
- offset-position — el punto de inicio utilizado cuando el camino en sí es relativo.
- offset-anchor — qué punto del elemento queda anclado al camino.
- offset — la propiedad abreviada que establece todas las anteriores a la vez.
| Valor inicial | none |
|---|---|
| Se aplica a | Elementos transformables. |
| Heredada | No. |
| Animable | No. |
| Versión | Motion Path Module Level 1 |
| Sintaxis DOM | object.style.offsetPath = "ray()"; |
Sintaxis
offset-path: none | ray() | path() | url() | <basic-shape>;Algunas notas sobre las funciones de camino:
path("...")acepta una cadena de camino SVG (la misma sintaxis del atributodusada por<path>). Es la opción más flexible y la más ampliamente compatible.ray(45deg)traza una línea recta desde la posición inicial del elemento hacia afuera en el ángulo indicado.url(#myPath)reutiliza la geometría de una figura SVG ya existente en el documento, referenciada por suid.- Una
<basic-shape>comocircle(),ellipse(),inset()opolygon()permite construir caminos comunes sin escribir SVG directamente.
Ejemplo: animando a lo largo de un camino SVG
En este ejemplo, el cuadrado verde y azul sigue un camino SVG curvo. La regla @keyframes anima offset-distance desde su valor predeterminado 0% hasta 100%, y offset-rotate: reverse mantiene el cuadrado orientado a lo largo de la curva mientras se mueve.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #ccc;
}
.mover {
width: 70px;
height: 70px;
background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
position: absolute;
left: 30%;
top: 100px;
offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
offset-rotate: reverse;
animation: move 3s linear infinite;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
</style>
<body>
<h2>Offset-path property example</h2>
<div class="mover"></div>
</body>
</html>Ejemplo: posicionando elementos en puntos fijos de un camino
No es necesario animar el camino. Establecer un offset-distance fijo simplemente estaciona el elemento en ese punto del recorrido — útil para distribuir cajas a lo largo de una curva compartida.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #666;
}
.item {
width: 100px;
height: 40px;
offset-position: 0% 0%;
offset-path: path('m 100 50 h 150 v 150');
}
#box1 {
background-color: #8ebf42;
offset-distance: -280%;
}
#box2 {
background-color: #1c87c9;
offset-distance: 190%;
}
</style>
<body>
<div class="item" id="box1"></div>
<div class="item" id="box2"></div>
</body>
</html>Valores
| Valor | Descripción |
|---|---|
none | No se especifica ningún camino de movimiento. Este es el valor predeterminado. |
ray() | Un segmento de línea que parte desde la posición del elemento y avanza en la dirección definida por el ángulo indicado, p. ej. ray(45deg). |
path() | Una cadena de camino SVG, p. ej. path("M 0 0 L 100 100"), usada directamente como camino. |
url() | Hace referencia al id de una figura SVG para usarla como camino de movimiento, p. ej. url(#myPath). |
<basic-shape> | Una función de forma: circle(), ellipse(), inset() o polygon(). |
Compatibilidad con navegadores
offset-path es compatible con todas las versiones actuales de Chrome, Edge, Firefox, Safari y Opera. El valor path() es el más ampliamente implementado; la compatibilidad con los valores ray() y <basic-shape> llegó más tarde, así que pruébalos al apuntar a navegadores más antiguos. El nombre heredado motion-path está obsoleto y no debe usarse.