¿Propiedades animables?

transform, opacity, color, width, height, border-radius, etc.

Nombre

Herramienta gratuita online Generar animaciones clave CSS, sin instalación

Configuración

Nombre

Duración (s)

Easing

ease-out

Dirección

normal

Iteraciones

Estado inicial

opacity

transform

Estado final

opacity

transform

Resultado

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in {
  animation: slide-in 0.5s ease-out 1 normal;
}

Vista previa

Box

Si esta herramienta te ayudó, invita al autor a un café.

Invitar un café

Más Herramientas

Conversor de almacenamiento Codificador/Decodificador JWT Calculadora Chmod Generador de CSS Sprite Analizador de estadísticas de texto Analizador de User-Agent Generador CSS backdrop-filter Diagrama de Ishikawa

Nombre

Cómo crear animaciones CSS

Más Herramientas

Comentarios