Animeerbare eigenschappen?

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

Naam

Gratis online CSS-keyframe-animaties genereren, geen installatie nodig

Instellingen

Naam

Duur (s)

Easing

ease-out

Richting

normal

Iteraties

Beginstatus

opacity

transform

Eindstatus

opacity

transform

Resultaat

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

Voorbeeld

Box

Als deze tool je hielp, trakteer de auteur op koffie.

Koffie aanbieden

Meer Tools

Gegevensopslag-converter JWT Encoder/Decoder Chmod-calculator CSS-sprite-generator Tekst-statistieken-analysator User-Agent Parser CSS-backdrop-filter-generator Fishbone-diagram

Naam

CSS-animaties maken

Meer Tools

Reacties