Propiedad CSS offset
Usa la propiedad abreviada CSS offset para animar un elemento a lo largo de una trayectoria definida. Conoce sus valores y ejemplos prácticos.
La propiedad CSS offset mueve un elemento a lo largo de una trayectoria que tú defines, en lugar de a lo largo de los ejes horizontales/verticales rectos que usan top/left o transform: translate(). Es la base de la función Motion Path: le asignas a un elemento una forma que seguir (un círculo, una ruta SVG, el borde de su contenedor) y luego lo mueves una distancia determinada a lo largo de esa forma. Anima esa distancia y el elemento recorre la trayectoria.
Esta página explica qué es offset, las cinco propiedades longhands que agrupa, su sintaxis y ejemplos ejecutables. Úsala cuando quieras que un elemento siga una curva o un contorno arbitrario — por ejemplo, un marcador trazando una ruta en un mapa, un icono orbitando un logotipo o texto deslizándose sobre una ola.
Para qué es abreviación offset
offset establece cinco propiedades longhands en una sola declaración. Cada una controla una parte diferente del movimiento:
- offset-path — la forma que sigue el elemento (un
path()SVG,circle(),ray(), o el contorno del contenedor). - offset-distance — qué tan lejos a lo largo de la trayectoria se encuentra el elemento en este momento (
0%es el inicio,100%es el final). Este es el valor que normalmente se anima. - offset-position — el punto de inicio utilizado cuando
offset-pathes una forma sin origen propio. - offset-anchor — qué punto del elemento queda fijo a la trayectoria (su centro, una esquina, etc.).
- offset-rotate — si el elemento rota para orientarse en la dirección del movimiento.
Dado que offset es una propiedad abreviada, cualquier longhand que se omita se restablece a su valor inicial. Por eso la mayoría de las animaciones reales animan offset-distance directamente (de modo que la trayectoria y el anclaje permanecen fijos mientras solo cambia la posición).
La propiedad offset se llamaba motion en una versión anterior de la especificación. Es posible que aún veas motion-path y motion-offset en artículos antiguos — esos son los nombres obsoletos de offset-path y offset-distance.
Esta es una tecnología experimental. Verifica el soporte actual de los navegadores antes de usarla en producción y proporciona un fallback sensato (como una animación transform simple) para los navegadores que no admiten trayectorias de movimiento.
| Valor inicial | auto none 0 auto auto |
|---|---|
| Se aplica a | Elementos transformables. |
| Heredada | No. |
| Animatable | Sí. |
| Versión | Motion Path Module Level 1 |
| Sintaxis DOM | Object.style.offset = "auto"; |
Sintaxis
offset: offset-position offset-path offset-distance offset-anchor / offset-rotate;El / separa los valores relacionados con la posición de offset-rotate. En la práctica raramente se escriben los cinco a la vez. Las formas más comunes son:
/* Follow an SVG path, facing the direction of travel */
offset: path("M 100 100 L 300 100 L 200 300 z") auto;
/* Just the path; control distance with a separate animation */
offset-path: path("M 0 0 H 300");
/* Reset everything to defaults */
offset: initial;auto después de la trayectoria corresponde a offset-rotate: auto, que mantiene el elemento apuntando a lo largo de la ruta mientras se mueve — muy útil para flechas o vehículos.
Ejemplo: animar un elemento a lo largo de una trayectoria triangular
El elemento de abajo sigue un triángulo. La regla @keyframes anima offset-distance de 0% a 100%, de modo que el cuadro da vueltas alrededor de la trayectoria indefinidamente.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@keyframes move {
from {
offset-distance: 0%;
}
to {
offset-distance: 100%;
}
}
div {
width: 60px;
height: 60px;
background-color: #8ebf42;
offset: path("M 100 100 L 300 100 L 200 300 z") auto;
animation: move 4s linear infinite;
}
</style>
</head>
<body>
<h2>Offset property example</h2>
<div></div>
</body>
</html>Ejemplo: orbitar un icono alrededor de un punto
Una trayectoria circle() hace que un elemento viaje en círculo. Establecer offset-rotate: 0deg lo mantiene en posición vertical en lugar de inclinarse con la curva.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@keyframes orbit {
from {
offset-distance: 0%;
}
to {
offset-distance: 100%;
}
}
.planet {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #1c87c9;
offset-path: circle(80px at 150px 150px);
offset-rotate: 0deg;
animation: orbit 5s linear infinite;
}
</style>
</head>
<body>
<h2>Orbit example</h2>
<div class="planet"></div>
</body>
</html>Valores
| Valor | Descripción |
|---|---|
| offset-position | El punto de inicio de la trayectoria cuando la forma de la ruta no tiene origen propio. |
| offset-path | La forma que sigue el elemento: un path() SVG, circle(), ray(), o el contorno del contenedor. |
| offset-distance | Qué tan lejos está el elemento a lo largo de la trayectoria, de 0% (inicio) a 100% (final). El valor que normalmente se anima. |
| offset-anchor | El punto del elemento que queda fijado a la trayectoria (por defecto auto, el transform-origin del elemento). |
| offset-rotate | Cómo rota el elemento a lo largo de la trayectoria: auto lo orienta en la dirección del movimiento, 0deg lo mantiene en posición vertical. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Propiedades relacionadas
- transform — mueve, rota o escala un elemento en los ejes rectos; el fallback habitual cuando las trayectorias de movimiento no son compatibles.
- animation — controla los
@keyframesque cambianoffset-distancecon el tiempo. - transition — anima
offset-distancede forma fluida en respuesta a un cambio de estado en lugar de con keyframes. - offset-path, offset-distance, offset-rotate, offset-anchor, offset-position — las propiedades longhands individuales, con ejemplos más detallados para cada una.