CSS Animasyon Kare Üreteci — Animasyon Oluşturma

CSS animasyonları JavaScript olmadan etkileşimli arayüzler oluşturmanıza olanak tanır. Anahtar kare oluşturucuyla pürüzsüz, yüksek performanslı animasyonlar yapın.

CSS Animasyon Temelleri

@keyframes slidein {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

.element {
  animation: slidein 0.3s ease-out;
}

Animation Özellikleri

• animation-name: @keyframes adı
• animation-duration: Oynatma süresi
• animation-timing-function: ease, linear, cubic-bezier
• animation-delay: Başlangıç gecikmesi
• animation-iteration-count: Tekrar sayısı (infinite olabilir)

Performans Optimizasyonu

Yalnızca transform ve opacity özelliklerini animasyon için kullanmak GPU hızlandırmasını sağlar. width, height ve margin animasyonları yeniden çizim yaparak yavaşlar.