Właściwości animowalne?

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

Nazwa

Darmowe narzędzie online Generuj animacje CSS klatka kluczowa, bez instalacji

Ustawienia

Nazwa

Czas trwania (s)

Easing

ease-out

Kierunek

normal

Iteracje

Stan początkowy

opacity

transform

Stan końcowy

opacity

transform

Wynik

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

Podgląd

Box

Jeśli to narzędzie Ci pomogło, postaw autorowi kawę.

Postawić kawę

Więcej narzędzi

Przelicznik pamięci Koder/Dekoder JWT Kalkulator Chmod Generator CSS Sprite Analizator statystyk tekstu Parser User-Agent Generator CSS backdrop-filter Diagram Ishikawy

Nazwa

Jak tworzyć animacje CSS

Więcej narzędzi

Komentarze