CSS Motion Path
Baseline 2023
Newly available
Since August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Experimental: Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.
Motion Path es un módulo CSS que permite animar cualquier objeto gráfico a lo largo de una ruta personalizada.
La idea es que cuando se deseaba animar un elemento que se movía a lo largo de un "path", anteriormente solo teniamos las propiedades de animación, posición, etc. a nuestra disposición, lo que no era ideal y solo permitía movimientos simples. Con offset-path
puedes definir un "path" específico de cualquier forma que se quiera. Luego se animará a lo largo de ese "path" animando offset-distance
, y variar la rotación en algún punto usando offset-rotate
.
Ejemplo básico
<div id="motion-demo"></div>
#motion-demo {
offset-path: path("M20,20 C20,100 200,0 200,100");
animation: move 3000ms infinite alternate ease-in-out;
width: 40px;
height: 40px;
background: cyan;
}
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
Referéncia
Propiedades
Especificaciones
Specification |
---|
Motion Path Module Level 1 # offset-path-property |
Compatibilidad con navegadores
BCD tables only load in the browser