Proprietà animabili?

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

Nome

Strumento gratuito online Genera animazioni chiave CSS, nessuna installazione

Impostazioni

Nome

Durata (s)

Easing

ease-out

Direzione

normal

Iterazioni

Stato iniziale

opacity

transform

Stato finale

opacity

transform

Risultato

@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;
}

Anteprima

Box

Se questo strumento ti è stato utile, offri un caffè all'autore.

Offri un caffè

Altri Strumenti

Convertitore archiviazione dati Codificatore/Decodificatore JWT Calcolatore Chmod Generatore CSS Sprite Analizzatore di statistiche del testo Analizzatore User-Agent Generatore CSS backdrop-filter Diagramma di Ishikawa

Nome

Come creare animazioni CSS

Altri Strumenti

Commenti