Generador de animaciones CSS
Ajusta los preajustes de movimiento o los fotogramas clave y reproduce la animación para comprobarla. Obtén CSS para usar en una página web y un ejemplo de uso HTML.
Qué puedes hacer
Ajustar el movimiento desde un preajuste
Elige entre 12 tipos, incluidas entradas, salidas y rotación. Ajusta la duración y la repetición a tu uso.
Editar también los estados intermedios
Indica el movimiento, la rotación, la escala y la opacidad de cada fotograma clave y comprueba el movimiento generado.
Obtener CSS y HTML
Copia o guarda el CSS de la animación y un ejemplo de uso HTML con la misma clase.
Cómo se usa
Elegir un preajuste
Elige el movimiento y establece la duración de 1 reproducción. Al seleccionar otro preajuste, también se sustituyen los ajustes que hayas modificado.
Ajustar solo lo que necesitas
Abre los detalles de reproducción o los fotogramas clave para cambiar el movimiento intermedio, la dirección, la repetición y otros ajustes.
Generar y reproducir
Compruébalo con «Generar CSS y vista previa». Si cambias algún ajuste, vuelve a generarlo.
Obtener CSS y HTML
Aplica el CSS y añade la clase toollet-motion a un elemento HTML. Usa el ejemplo de uso HTML junto con el CSS.
Útil para
Crear una animación de entrada
Usa un preajuste de fundido de entrada o entrada desde abajo para ajustar el movimiento y la velocidad de entrada.
Movimiento al interactuar con un botón
Cambia la condición de inicio a desplazamiento o enfoque del teclado para crear un movimiento que responda a la interacción.
Entender los fotogramas clave y las condiciones de reproducción
Estados intermedios y duración
El % de un fotograma clave indica su posición dentro de 1 reproducción. En una animación de 1 segundo, el 50% corresponde a 0,5 segundos. La aceleración determina cómo cambian los valores entre fotogramas clave.
Movimiento, rotación y aspecto
La posición horizontal/vertical es el desplazamiento desde la posición original. Una escala de 1 conserva el tamaño original; una opacidad de 0 es transparente y una de 1 es opaca.
Retardo, repetición y dirección
El retardo se añade una sola vez antes de iniciar la reproducción. En una reproducción finita, el tiempo total es retardo + duración de 1 reproducción × número de repeticiones. La alternancia cambia entre las direcciones hacia delante y hacia atrás.
Estados antes y después de la reproducción
Elige qué estado aparece durante el retardo y después de que termine la reproducción. Los ajustes de inversión y alternancia cambian qué posiciones de fotograma clave se usan al inicio y al final de la reproducción.
Ajustes de movimiento reducido
El CSS generado admite la opción de movimiento reducido del dispositivo. Detiene la animación y usa el estado final determinado por la dirección y el número de repeticiones configurados. En la reproducción infinita, usa el estado final de la primera reproducción.
Preguntas frecuentes
¿Puedo reproducirlo una sola vez?
Desactiva «Mantener repetición» y establece el número de repeticiones en 1. Los ajustes preestablecidos estándar comienzan con 1 reproducción; rotación y flotación comienzan con la repetición continua activada.
¿A qué elemento debo aplicar el CSS?
Añade la clase toollet-motion a un elemento HTML y úsala con el CSS generado. El ejemplo de uso HTML es un fragmento de elemento button, no una página web independiente completa.
¿Cuántos fotogramas clave puedo crear?
Puedes tener entre 2 y 8 fotogramas clave, incluidos el inicio en 0% y el final en 100%. Al añadir uno, se coloca en el punto medio del intervalo más amplio. El inicio y el final no se pueden eliminar; solo sus posiciones en % son fijas.
La vista previa desapareció después de cambiar un ajuste.
Los resultados se borran al cambiar los ajustes para evitar que uses por error el movimiento o el código de los ajustes anteriores. Vuelve a generarlos para comprobar la configuración actual.
¿Por qué no se mueve la vista previa?
El movimiento se detiene cuando tu dispositivo tiene activada la opción de movimiento reducido. Para los ajustes de desplazamiento y enfoque, comprueba también las condiciones de inicio. La vista previa se pausa cuando cambias a otra pestaña.
¿Puedo usar varias animaciones en la misma página?
Los nombres de la clase generada y de los fotogramas clave son compartidos. Para usar animaciones separadas, cambia ambos nombres en cada animación y refleja esos cambios en el HTML correspondiente.
Entradas y resultados
- Ajustes
- 12 preajustes, entre 2 y 8 fotogramas clave y una duración de 0,2 a 60 segundos.
- Reproducción
- Retardo de 0 a 60 segundos, de 1 a 100 repeticiones o repetición infinita, aceleración, dirección, estados antes y después de la reproducción y condiciones de inicio.
- Salida
- CSS y un ejemplo de uso HTML. Solo se define el movimiento; no se crea una página web completa ni un archivo de vídeo.