CSS Animation Üretici
Zaman çizelgesine keyframe ekle, her duraktaki transform / opacity / renk / filter değerlerini ayarla, süre / easing / yön / iterasyon değerlerini ince ayar yap, sonra önizle ve dışa aktar. Fade'den Cyberpunk Marquee'ye 18 şablon.
Canlı önizleme
Bir şekil seç, zaman çizelgesini kaydır ve animasyonun anlık oynamasını izle.
Zaman çizelgesi3 durak
0%25%50%75%100%
Düzenlenen durak 0%
%
px
px
deg
deg
deg
Hazır şablonlar
Hazır bir animasyonu uygula, sonra ince ayar yap.
Animasyon özellikleri
Animasyonun nasıl oynayacağını ayarla — süre, yumuşatma, tekrar ve daha fazlası.
s
s
Oynatma durumu
Kod çıktısı
CSS, Tailwind config, React veya JSON — istediğini kopyala.
@keyframes myAnim {
0% {
transform: none;
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.9;
}
100% {
transform: none;
opacity: 1;
}
}
.animated {
animation: myAnim 1s ease 0s infinite normal none running;
}