Propiedad CSS offset-anchor
Usa la propiedad CSS offset-anchor para especificar el punto de anclaje dentro del elemento. Conoce sus valores y practica con ejemplos.
La propiedad CSS offset-anchor establece qué punto de un elemento se ancla al offset path cuando el elemento se mueve a lo largo de esa ruta. En otras palabras, responde a la pregunta: "A medida que el contenedor recorre la ruta, ¿qué punto del contenedor debe seguirla: su centro, una esquina u otro lugar?"
Cuando animas un elemento a lo largo de una ruta con offset-distance, el navegador necesita un punto de referencia en el contenedor que permanezca sobre la línea. Por defecto, ese punto es el centro del contenedor, pero offset-anchor te permite moverlo. Este es el equivalente de transform-origin para el movimiento por rutas: en lugar de elegir el pivote para rotaciones y escalados, eliges el punto que recorre la ruta.
Por qué es importante offset-anchor
Sin offset-anchor, un elemento que sigue una ruta queda centrado sobre la línea, de modo que la mitad sobresale por cada lado. Al cambiar el anclaje puedes:
- Hacer que la esquina superior izquierda trace la ruta (
offset-anchor: 0 0), útil cuando la ruta representa el borde delantero de un objeto. - Mantener la punta de una etiqueta o marcador exactamente sobre la curva mientras el resto del contenedor queda hacia un lado.
- Ajustar con precisión la alineación de un icono (por ejemplo, las ruedas de un coche, la punta de una flecha o la punta de un pin) para que se sitúe de forma natural sobre la ruta que sigue.
Solo tiene efecto visible cuando el elemento está realmente colocado sobre un offset path: establece primero offset-path y luego anima offset-distance. offset-anchor forma parte de la propiedad abreviada offset.
offset-anchor forma parte del módulo experimental CSS Motion Path. La compatibilidad es amplia en los navegadores modernos, pero verifica la compatibilidad actual y proporciona una alternativa adecuada (el elemento simplemente se renderiza en su posición de flujo normal cuando la función no está soportada).
| Valor inicial | auto |
|---|---|
| Se aplica a | Elementos transformables. |
| Heredable | No. |
| Animable | Sí. |
| Versión | Motion Path Module Level 1 |
| Sintaxis DOM | object.style.offsetAnchor = "right top"; |
Sintaxis
Sintaxis CSS de offset-anchor
offset-anchor: auto | <position>;Ejemplo de la propiedad offset-anchor:
Ejemplo de código CSS con offset-anchor
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #ccc;
padding: 0 50px;
width: 100%;
}
svg,
.box {
position: absolute;
}
.box {
animation: move 3s 0ms infinite alternate ease-in-out;
background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
height: 50px;
width: 50px;
offset-path: path("M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307");
offset-anchor: center;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
</style>
</head>
<body>
<h2>Offset-anchor property example</h2>
<svg class="track" viewBox="0 0 451 379" width="451px" height="379px">
<path fill="none" stroke="#666" stroke-width="1" d="M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307"></path>
</svg>
<div class="box"></div>
</body>
</html>En este ejemplo, el .box verde y azul sigue la misma curva dibujada por la pista <svg>. Con offset-anchor: center (el comportamiento predeterminado de auto), el centro del contenedor permanece pegado a la línea. Prueba a cambiarlo a 0 0 o right bottom para ver cómo un punto diferente del contenedor recorre la ruta.
Valores
offset-anchor acepta la palabra clave auto o cualquier valor CSS <position>, del mismo tipo que se usaría en background-position.
| Valor | Descripción |
|---|---|
auto | El centro del contenedor. |
<position> | <percentage> - Un porcentaje para el desplazamiento horizontal es relativo al ancho del padding box. Un porcentaje para el desplazamiento vertical es relativo a la altura del padding box. <length> - Un valor de longitud indica un desplazamiento desde la esquina superior izquierda del padding box del elemento. |
initial | Hace que la propiedad use su valor predeterminado. |
inherit | Hereda la propiedad de su elemento padre. |
Cuando se usa offset-anchor: auto, el punto de anclaje toma el valor de offset-position (que por defecto es el centro del contenedor), por lo que el contenedor queda centrado sobre la ruta.
Propiedades relacionadas
offset-anchor es una pieza del conjunto de herramientas CSS Motion Path. Generalmente se combina con:
offset-path— define la línea o forma a lo largo de la cual se mueve el elemento.offset-distance— qué tan lejos a lo largo de la ruta se coloca el elemento (anima esto para que se desplace).offset-position— el punto de inicio utilizado cuandooffset-pathesnoneo cuando el anclaje esauto.offset-rotate— determina si el elemento rota para orientarse en la dirección del movimiento.offset— la propiedad abreviada que establece todo lo anterior a la vez.