Cada desarrollador ha copiado un bloque de @keyframes a partir de una respuesta de Stack Overflow, la pegó, la actualizó y encontró el elemento perfectamente quieto. Nueve de cada diez veces la razón es aburrida: el nombre de la animación en el @keyframes la regla no coincidía con el nombre en el animation la taquigrafía, o la duración se dejó en cero, o la clase nunca aterrizó en el elemento. La otra razón es que la animación de fotogramas clave es una de esas esquinas de CSS donde no puedes juzgar el resultado leyendo el código. Una secuencia de porcentajes y transformaciones no te dice nada sobre si el movimiento se siente suave, ágil o mareado hasta que lo ves correr.
Una animación CSS es el mecanismo del navegador 's para mover un elemento a través de una secuencia de estilos con nombre a lo largo del tiempo. A diferencia de una transición, que anima un solo cambio y espera un disparador, una animación sigue a @keyframes script con tantos pasos como quieras, puede girar para siempre y comienza por sí solo en el momento en que se aplica. Es lo que impulsa la carga de hilanderos, pulsos de atención, efectos de entrada y cada fragmento de movimiento ambiental lo que hace que una interfaz se sienta viva. Pero las dos mitades, los fotogramas clave y la taquigrafía, tienen que estar de acuerdo exactamente, y la taquigrafía agrupa siete u ocho valores en una línea en un orden que la mayoría de la gente nunca memoriza.
los Generador de animación CSS elimina las conjeturas. Selecciona un movimiento de una biblioteca de ajustes preestablecidos, ajusta la duración, la flexibilización, el retraso, el recuento y la dirección de iteración y lo ves reproducir en un elemento de vista previa en vivo. La herramienta escribe ambos @keyframes regla y coincidencia animation taquigrafía en un cuadro listo para copiar, con los nombres ya sincronizados, por lo que el bloque que pegas funciona la primera vez.
TL;Dr: Una animación CSS mueve un elemento a través de a
@keyframessecuencia a lo largo del tiempo y, a diferencia de una transición, no necesita disparador y puede circular. El@keyframesnombre y elanimation-namedebe coincidir exactamente, que es la razón más común por la que una animación no hace nada. La taquigrafía incluye nombre, duración, función de tiempo, retraso, recuento de iteraciones, dirección y modo de relleno. Prefiere animartransformyopacitypara un movimiento suave y compuesto. Este generador le brinda catorce ajustes preestablecidos, control de reproducción completo y una vista previa en vivo, y emite juntos tanto los fotogramas clave como la taquigrafía. Se ejecuta completamente en su navegador sin registrarse.
¿qué problema resuelve un generador de animación CSS?
Lo incómodo de la animación de fotogramas clave es el viaje de ida y vuelta. Para sintonizar un rebote a mano escribes el @keyframes regla, escribe el animation línea, guarda el archivo, cambia al navegador, espera la recarga y mira. Si el rebote es demasiado agresivo, cambias uno translateY valore y haga todo el bucle nuevamente. Debido a que ese ciclo es lento, la mayoría de las personas aceptan la primera versión que no parece rota en lugar de la versión que parece correcta, y la diferencia entre esas dos es exactamente el pulido que separa una interfaz considerada de una plantilla.
Un generador colapsa ese bucle en un solo clic. Elige un ajuste preestablecido, arrastra el control deslizante de duración y el elemento de vista previa reproduce el movimiento frente a usted inmediatamente. Cambie la función de sincronización desde ease a una curva más bézier y el cambio de sensación es instantáneo. Establece el recuento de iteraciones en infinito y los bucles de animación para que puedas estudiarlo. Después de unos minutos de esto, construyes una intuición sobre cómo se ven seiscientos milisegundos frente a mil doscientos, que es la sensación que necesitas para tomar buenas decisiones de movimiento en cualquier otro lugar.
También hay un argumento de corrección. No se puede producir un mal formado animation valore eligiendo entre menús y arrastrando controles deslizantes, y no puede escribir mal el nombre del fotograma clave, porque la herramienta vincula la taquigrafía a los fotogramas clave que generó. La salida siempre es segura para pegar. Esa confiabilidad es la misma razón por la que mantengo cerca a los compiladores visuales de CSS para otras propiedades, el mismo instinto detrás de alcanzar el generador de gradiente en lugar de contar las paradas de color en mi cabeza, o el generador de sombras de caja en lugar de adivinar los radios borrosos.
¿en qué se diferencia una animación CSS de una transición CSS?
Esto hace tropezar a la gente constantemente, por lo que vale la pena ser preciso. Una transición anima una sola propiedad entre dos estados y requiere algo que cambiar, un desplazamiento, un enfoque, una clase alternada, antes de ejecutarse. Tiene un valor inicial y un valor final y nada intermedio. Una animación, por el contrario, sigue a @keyframes regla que puede definir cualquier número de pasos intermedios, por lo que el elemento puede moverse a través de una coreografía completa en lugar de una línea recta de A a B. Tampoco espera a nada: aplícalo y suena.
La consecuencia práctica es que buscas una transición cuando quieres suavizar un cambio de estado y una animación cuando quieres un movimiento intrínseco al elemento. Un botón que se oscurece al flotar es una transición. Una ruleta que gira para siempre, una insignia que pulsa para dibujar el ojo o una tarjeta que se desliza hacia arriba a medida que la página se carga son todas animaciones, porque el movimiento ocurre por sí solo y a menudo se repite. Si todavía estás decidiendo cuál necesita un efecto determinado, la regla general es simple: si la acción de un usuario la inicia y va en una dirección, usa una transición; si se reproduce solo, se repite o tiene más de dos pasos, utilice una animación. El Generador de transición CSS es la herramienta complementaria del primer caso y los dos cubren la mayor parte del movimiento que jamás escribirás.
| Aspecto | Transición | Animación |
|---|---|---|
| Gatillo | Necesita un cambio de estado (flotar, enfocar, clase) | Comienza por sí solo cuando se aplica |
| Pasos | Dos, un comienzo y un final | Cualquier número, vía @keyframes |
| Bucle | No, se ejecuta una vez por cambio | Sí con iteration-count |
| Uso Típico | Efectos de flotar y enfocar | Hilanderos, pulsos, entradas |
¿cuál es el orden correcto de la taquigrafía de animación?
los animation la taquigrafía es densa. Puede llevar el nombre del fotograma clave, la duración, la función de temporización, el retraso, el recuento de iteraciones, la dirección, el modo de llenado y el estado de reproducción, todo en una línea, y el orden importa para los dos valores de tiempo exactamente como lo hace para las transiciones. Este generador escribe el nombre primero, luego la duración y la función de temporización, luego el retraso opcional, luego el recuento de iteraciones, la dirección y el modo de llenado, por ejemplo animation: fadeIn 0.6s ease 1 both. Escribir el nombre primero es legal porque los nombres de los fotogramas clave no son palabras clave CSS y se lee más claramente que enterrar el nombre al final.
La única regla que atrapa a todos son los dos valores de tiempo. La duración y el retraso son ambos tiempos, y CSS los distingue sólo por posición: el primer valor de tiempo es la duración y el segundo es el retraso. Todo lo demás en la taquigrafía es una palabra clave o un número sin unidades, por lo que no se puede confundir con un tiempo. Es por eso que la herramienta puede eliminar de forma segura el retraso cuando es cero, porque no tiene unidades 1 o la palabra infinite lo que sigue es inequívocamente el recuento de iteraciones, no una segunda vez. El generador también omite cualquier valor que sea igual a su valor predeterminado de CSS, por lo que a normal dirección o a none el modo de llenado nunca obstruye la salida. El resultado es una taquigrafía que lee la forma en que lo escribirías a mano una vez que conocieras las reglas.
¿por qué no se reproduce mi animación CSS?
Este es el acantilado y casi todo el mundo se aleja al menos una vez. La causa más común es un desajuste entre ellos animation-name y el nombre en el @keyframes regla. Un error tipográfico, una diferencia de mayúsculas o un nombre al que se le cambió el nombre en un lugar y no en el otro deja al navegador sin una regla de fotograma clave a la que vincularse, por lo que silenciosamente no hace nada. No hay error ni advertencia; el elemento simplemente se queda ahí. Debido a que este generador escribe ambas mitades juntas con el mismo nombre, toda esa clase de error desaparece, lo cual es una gran parte del punto.
Vale la pena saber las otras causas porque aparecen cuando escribes animaciones a mano. Una duración de cero significa que la animación se completa instantáneamente y nunca la ves. Un elemento que es display: none no ejecuta sus animaciones en absoluto, por lo que un desvanecimiento que depende del elemento que se está renderizando no se activará. Una propiedad faltante o mal escrita dentro de un marco clave se ignora silenciosamente en lugar de marcarla. Y una animación con animation-fill-mode: none, el valor predeterminado, devuelve el elemento a sus estilos no unánimes en el instante en que termina, lo que puede parecer que nunca se ejecutó si el movimiento fue sutil. Ver la animación en una vista previa en vivo aparece la mayoría de estos en segundos, como es el caso del movimiento de construcción donde puedes verlo en lugar de hacerlo en un archivo que sigues recargando.
¿qué hace el modo de relleno de animación?
El modo de llenado es la configuración que la gente entiende al final y más necesita. Decide qué estilos muestra el elemento fuera de la ventana activa de animación 's, tanto antes de que comience durante cualquier retraso como después de que finalice. El valor predeterminado, none, significa que el elemento ignora el primer y último fotograma clave cuando la animación no se está ejecutando, por lo que se ubica en sus estilos normales antes de la animación y vuelve a ellos después. Ese retroceso es la fuente de una frustración muy común: animas un elemento para que se desvanezca, se desvanece maravillosamente y luego desaparece nuevamente en el momento en que termina la animación, porque con none la final opacity: 1 keyframe se descarta una vez finalizada la animación.
La solución es animation-fill-mode: forwards, que mantiene aplicado el último fotograma clave una vez finalizada la animación, de modo que el elemento descolorido permanezca visible. backwards aplica el primer fotograma clave durante cualquier retraso antes de que comience la animación, lo cual es útil cuando tienes un retraso y no deseas que el elemento parpadee primero en su estado predeterminado. both hace ambas cosas a la vez y es la opción general más segura para animaciones de entrada, razón por la cual este generador establece por defecto nuevas animaciones both. Comprender el modo de llenado es la diferencia entre una entrada que aterriza y una que se deshace, y es mucho más fácil de entender alternándola en una vista previa y observando el cambio final que leyendo la especificación en frío.
¿Cuándo debería realizarse un bucle de animación y cómo lo controlo?
El recuento de iteraciones decide cuántas veces se ejecuta la animación. Configure en un número entero positivo y la animación se repetirá tantas veces y luego se detendrá; configúrelo en infinite y gira para siempre. Las animaciones en bucle son la opción correcta para el ambiente, el movimiento continuo, un spinner que muestra que se está produciendo trabajo, un pulso que mantiene vivo un llamado a la acción, una flotación sutil que le da algo de vida a una imagen de héroe. Las animaciones one-shot, ejecutadas una vez, son para entradas y salidas, donde el movimiento tiene un principio y un final claros y repetirlo distraería.
La dirección se empareja con el recuento de iteraciones para determinar cómo se ejecuta cada pase. El valor predeterminado normal reproduce cada iteración desde el primer fotograma clave hasta el último. reverse juega cada uno hacia atrás. alternate ejecuta el primer pase hacia adelante y el siguiente hacia atrás, haciendo ping-pong entre los puntos finales, que es como se construye un pulso suave de ida y vuelta sin definir un viaje de regreso en los fotogramas clave. alternate-reverse comienza hacia atrás y se alterna desde allí. El generador expone los cuatro para que puedas sentir la diferencia: un pulso con alternate respira y exhala de forma natural, mientras que los mismos fotogramas clave normal y un número par de pasos deben codificar ellos mismos el retorno. Para movimiento en bucle, alternate casi siempre produce el resultado más orgánico con menos trabajo de fotograma clave.
¿qué propiedades debo animar para un rendimiento fluido?
Las propiedades que animas deciden si el movimiento se ejecuta a sesenta fotogramas por segundo o tartamudea, y la elección es la misma que para las transiciones. Preferir transform y opacity. Ambos pueden entregarse al compositor y animarse sin que el navegador vuelva a calcular el diseño de la página, para que se mantengan fluidos incluso en hardware modesto y bajo carga. Por eso se acerca una tarjeta transform: translateY se siente sin esfuerzo mientras la misma tarjeta se anima top investigaciones operacionales margin-top se siente duro. Cada entrada preestablecida en este generador está construida sobre transform y opacity Por esta razón exactamente.
Las propiedades para evitar animar en una secuencia de fotogramas clave son las que activan el diseño: width, height, top, left, margin y padding. Cambiar cualquiera de estos obliga al navegador a volver a calcular la geometría del elemento y todo lo que lo rodea en cada cuadro, lo cual es costoso y es la causa más común de animación janky, que empeora cuando la animación se repite y paga ese costo continuamente. Si quieres que un elemento crezca, a transform: scale casi siempre es más barato que animar width y height, y parece casi idéntico. El argumento más amplio para ensamblar un conjunto de herramientas que lo guíen hacia el camino barato está en el Kit de herramientas para desarrolladores web pieza, y los hábitos de flujo de trabajo que hacen que el movimiento sea una decisión rápida en lugar de lenta están en el Herramientas de productividad para desarrolladores guía.
¿Cómo mantiene honesta la vista previa el generador?
Cada generador visual corre el riesgo de que la vista previa y el código exportado se separen hasta que la herramienta le enseña un valor que no se reproducirá. Este generador inyecta lo exacto @keyframes regla que ingresa a la página y aplica exactamente animation taquigrafía le muestra el elemento de vista previa, por lo que el movimiento que ve es el movimiento que producirá su CSS copiado. No existe una ruta de animación separada que pueda estar en desacuerdo, y el nombre del fotograma clave en la vista previa es el nombre en la salida.
Debido a que una animación se ejecuta en el montaje y luego finaliza, la vista previa necesita una forma de reproducirla, que la herramienta maneja volviendo a montar el elemento de vista previa cuando presiona reproducir. Eso refleja cómo se comporta una animación de una sola vez en producción, donde se reproduce cuando aparece el elemento y luego mantiene su estado final de acuerdo con el modo de llenado. La salida también permanece mínima, eliminando el retraso cero y cualquier valor predeterminado para que copie solo declaraciones significativas, la misma disciplina de no emitir nada redundante que se ejecuta a través del Generador de filtros CSS y los otros constructores visuales. Cuando emparejas una animación de fotograma clave con un diseño que posiciona el elemento, el generador flexbox es un compañero natural para construir la estructura circundante.
¿qué navegadores admiten animaciones CSS?
Las animaciones CSS son compatibles con todos los navegadores actuales y lo han sido durante más de una década. El @keyframes regla, la animation la taquigrafía y todas sus manecillas son universales y sin prefijo, por lo que la salida de este generador funciona en Chrome, Firefox, Safari y Edge sin prefijos ni alternativas de proveedores. La referencia definitiva es la especificación CSS Animations Nivel 1 del W3C, que es la fuente principal de cómo se comporta cada parte de la taquigrafía, y vale la pena leerla una vez que el generador le haya dado una idea física de lo que hacen las piezas. Para accesibilidad, recuerde que algunos usuarios establecen un prefers-reduced-motion preferencia, y es una buena práctica envolver animaciones en bucle no esenciales en una consulta de medios que la respete, de modo que el movimiento ambiental se pueda desactivar para las personas que lo encuentran incómodo.
Si está ensamblando un conjunto más amplio de herramientas visuales CSS, el generador de transición y el Generador de transformada CSS siéntese naturalmente junto a este, ya que las transformaciones son la materia prima, la mayoría de estas animaciones se mueven y las transiciones manejan los cambios de estado que las animaciones no. Aquí todo se ejecuta en el lado del cliente y el CSS que copia es suyo para usarlo sin tiempo de ejecución, sin paso de compilación ni dependencia.
Preguntas frecuentes
¿qué es un generador de animación CSS?
Un generador de animación CSS es una herramienta visual que crea una animación de fotograma clave a partir de la configuración que elija. Elige un ajuste preestablecido, establece la duración, la flexibilización, el retraso, el recuento y la dirección de la iteración, y genera el @keyframes regla y el animation taquigrafía junto con una vista previa en vivo que puedes reproducir.
¿cuál es la diferencia entre una animación CSS y una transición CSS?
Una transición anima un solo cambio entre dos estados y necesita un disparador como flotar para ejecutarse. Una animación sigue a @keyframes secuencia con cualquier número de pasos, puede realizar un bucle y comienza por sí solo tan pronto como se aplica, sin esperar un cambio de estado.
¿qué orden utiliza la taquigrafía de animación?
Esta herramienta escribe primero el nombre del fotograma clave, luego la duración, la función de tiempo, el retardo, el recuento de iteraciones, la dirección y el modo de llenado, por ejemplo, la animación: fadeIn 0,6s facilidad 1 ambos. El primer valor de tiempo es siempre la duración y el segundo es el retraso, por lo que se lee un único valor de tiempo como duración.
¿cómo hago un bucle de animación CSS para siempre?
Establezca el recuento de iteraciones en infinito. En la abreviatura de la palabra infinito, como en la animación: gire 1s lineal infinito. En cambio, cualquier número entero positivo repite la animación muchas veces y luego se detiene según el modo y la dirección de llenado.
¿por qué no se reproduce mi animación CSS?
La causa más común es una discrepancia entre el nombre de la animación y el nombre de @keyframes, incluido un error tipográfico o una diferencia de caso, lo que deja al navegador sin una regla a la que vincularse. También verifique que la duración sea superior a cero y que el elemento esté renderizado, ya que se muestra una animación en una pantalla: ningún elemento no se ejecuta.
¿qué hace la propiedad del modo de relleno de animación?
El modo de relleno decide qué estilos muestra el elemento antes de que comience la animación y después de que finalice. El valor predeterminado ninguno devuelve el elemento a sus estilos normales cuando finaliza la animación. La configuración hacia adelante mantiene el fotograma clave final, hacia atrás aplica el primer fotograma clave durante un retraso y ambos hacen ambas cosas.
¿qué propiedades debo animar para un rendimiento fluido?
Prefiere transformación y opacidad. El navegador puede animarlos en el compositor sin volver a calcular el diseño, por lo que se mantienen fluidos a 60 fps. Animar el ancho, el alto, la parte superior, la izquierda o el margen obliga a volver a calcular el diseño en cada cuadro, que es la razón habitual por la que una animación tartamudea.
¿la animación generada CSS es gratuita y segura de usar?
Sí. La herramienta es completamente gratuita, sin límites de registro ni uso, y emite CSS estándar sin prefijo compatible con todos los navegadores modernos. Todo el procesamiento ocurre en su navegador, por lo que no se carga nada y la herramienta funciona sin conexión una vez cargada.
