Pauta

Un editor de @keyframes con línea de tiempo

Cada propiedad (desplazamiento, giro, escala, opacidad y color) tiene su pista dibujada como un pentagrama: un clic pone una clave, arrastrarla la mueve y Intro edita su valor, y la curva de cada tramo se elige de una lista que incluye un muelle con masa, rigidez y amortiguación convertido a linear(). El cabezal recorre la animación al tiempo exacto, el código se tiñe por el bloque en que va, y «Copiar CSS» entrega el @keyframes con la línea animation mientras una segunda tarjeta, animada solo con ese texto, se mueve igual que la del editor.