CSS Motion Path
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