Herramientas gratuitas
Español
Generar animaciones CSS
Generar animaciones CSS — Introduce datos y revisa su formato o contenido. Guía de entrada: Modo, Segundos. Sin cuenta.
Sin cuenta
Cargando herramienta…
Cómo usar
- 1Guía de entrada: Modo, Segundos.
- 2Ejecuta la herramienta y revisa el resultado.
- 3Copiar resultado / Guardar resultado.
A tener en cuenta
Revisa primero el formato del ejemplo. Conserva el original y comprueba valores, espacios y saltos de línea antes de usar el resultado.
Los anuncios pueden procesar datos de conexión. La personalización respeta tus opciones de privacidad. Privacidad (inglés)
Ejemplo calculado de entrada y salida
Resultados del motor real con los valores de ejemplo, sin datos personales ni trabajos guardados. Carga el ejemplo en la herramienta para ver las mismas entradas.
Entrada de ejemplo
| Campo | Valor |
|---|---|
| Modo | Aparecer gradualmente |
| Segundos | 1 |
Resultado de ejemplo
@keyframes example {
from { opacity: 0; }
to { opacity: 1; }
}
.element { animation: example 1s ease both; }
@media (prefers-reduced-motion: reduce) {
.element { animation: none; }
}Requisitos de entrada
Estos son límites reales de validación, no una garantía de que todo valor aceptado sea realista o aplicable a tu caso.
- Modo: Opciones disponibles: Aparecer gradualmente / Aparecer deslizándose / Girar