Categoría: Desarrollo
Generador de @keyframes CSS
Elige un preajuste de animación y copia el bloque @keyframes
Elige un preajuste de aparición, deslizamiento, rebote, pulso o giro, define la duración, la función de temporización, el número de repeticiones y la dirección, y copia el bloque @keyframes completo más la forma abreviada de animation que lo usa, con una vista previa en vivo.
@keyframes localtools-preview {
from {
transform: translateY(0);
}
40% {
transform: translateY(-24px);
}
60% {
transform: translateY(0);
}
80% {
transform: translateY(-12px);
}
to {
transform: translateY(0);
}
}
.element {
animation: localtools-preview 1.2s ease-in-out infinite normal;
}La vista previa se reinicia cada vez que cambias el preajuste, usando el CSS exacto mostrado abajo.
Todo lo de esta página se procesa en tu navegador. No se sube nada.
Para qué sirve
Escribir un bloque @keyframes a mano implica nombrar los puntos porcentuales y acertar con los valores de propiedad en cada uno para que interpolen como esperas, algo fácil de hacer sutilmente mal en algo como un rebote con varios puntos. Esta herramienta incluye un puñado de formas de animación comunes como listas de puntos ya preparadas, y te deja ajustar los controles de temporización que no cambian los propios fotogramas clave, así que la vista previa siempre coincide exactamente con el bloque CSS que hay debajo.
Cómo se usa
- Elige un preajuste de animación.
- Define la duración, la función de temporización, el número de repeticiones y la dirección.
- Copia el bloque @keyframes y la forma abreviada de animation que hay debajo.
Privacidad
Esta herramienta funciona íntegramente en tu navegador. Lo que introduces nunca se sube, se guarda ni se comparte: al cerrar la pestaña desaparece.
Preguntas frecuentes
- ¿Por qué la vista previa se reinicia al cambiar el preajuste?
- Cambiar de preajuste sustituye los puntos de @keyframes subyacentes, así que el elemento de vista previa se vuelve a montar para garantizar que la animación en curso coincide con la recién generada en lugar de terminar una obsoleta.
- ¿Qué hace el número de repeticiones "infinite"?
- Repite la animación para siempre, que es lo que usa la vista previa por defecto; define un número en su lugar si quieres que se reproduzca una cantidad fija de veces y luego se detenga.
- ¿Se envía algo a un servidor?
- No. El bloque @keyframes y la forma abreviada de animation se construyen en la página a partir del preajuste y los valores de temporización que elijas, por eso la vista previa se actualiza al instante.