Yükleniyor...

CSS Animasyonlar

Geçişler bir tetikleyicide A → B öğretti. Transform çizilen kutunun nereye gittiğini gösterdi. Animasyonlar bir zaman çizelgesi yazar: durum noktası nabız alsın, yükleyici sonsuza dönsün, kartlar sırayla girsin — adımlar @keyframes ile, oynatma animation ile.

Animasyon nedir?

İki parça: yüzdelerde (veya from / to) stilleri sıralayan adlı keyframe kümesi (@keyframes) ve bu adı süre, isteğe bağlı gecikme, tekrar sayısı, yön, zamanlama fonksiyonu ve fill-mode ile çalan kural. Tarayıcı keyframe durakları arasında ara değer üretir.

Ad eşleşmesi katıdır: animation-name: pulse yalnızca @keyframes pulse varsa çalışır. Birini diğerini değiştirmeden yeniden adlandırırsanız hiçbir şey kıpırdamaz.

Animasyon kontrolleri — bir bakışta

📊 Temel animation parçaları

Parça Görev
@keyframes name { … } % / from / to noktalarında özellik değerleri zaman çizelgesi
animation-name Hangi keyframe kümesi oynatılacak
animation-duration Bir döngünün süresi (s veya ms)
animation-timing-function Döngü içi yumuşatma (ease, linear, …)
animation-delay İlk döngüden önce bekleme
animation-iteration-count Kaç döngü (number veya infinite)
animation-direction normal, reverse, alternate, alternate-reverse
animation-fill-mode Önce/sonra stiller (none, forwards, backwards, both)
animation shorthand name → duration → timing → delay → iteration → direction → fill-mode (yaygın sıra)

Her longhand’i aynı anda kullanmanız gerekmez. name + duration ile başlayın; yükleyiciler için infinite, geri sekme için alternate, son keyframe kalsın diyorsanız forwards ekleyin.

İlk zaman çizelgesi — sakin bir pulse

Opacity ve transform boyama dostudur. Yumuşak bir pulse, ilk @keyframes alıştırması için klasiktir.

@keyframes ile yumuşak durum pulse’u

css 
@keyframes pulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.55;
transform: scale(0.92);
}
}

.status-dot {
display: inline-block;
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background: #16a34a;
animation: pulse 1.4s ease-in-out infinite;
}

0% ve 100% eşleşir; döngü temiz kapanır. infinite döngüyü sürdürür — küçük durum göstergesi için uygun; tüm sayfa hero’sunu animate ederseniz gürültülü olur.

Sonsuz dönüş — yükleyiciler linear sever

linear ve infinite ile dönüş sürekli spinner gibi okunur. prefers-reduced-motion yedeği ekleyin: dönüşü gizleyin veya dondurun.

Sonsuz rotate ile yükleyici halkası

css 
@keyframes spin {
to {
transform: rotate(360deg);
}
}

.loader {
width: 2rem;
height: 2rem;
border: 3px solid #e5e7eb;
border-top-color: #2563eb;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
.loader {
animation: none;
border-top-color: #e5e7eb;
}
}

to, 100% kısaltmasıdır. Yalnızca dönüşün sonu önemliyse varsayılan 0% (transform yok) yeterlidir.

Gecikme ve stagger — aynı keyframes, farklı başlangıçlar

Tek keyframe kümesi birçok öğeyi sürebilir. animation-delay ile stagger yapın; üç ayrı animasyon yazmadan liste sıralı hissettirsin.

Liste öğelerinde kademeli fade-up

css 
@keyframes fade-up {
from {
opacity: 0;
transform: translateY(0.75rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.reveal-list li {
opacity: 0;
animation: fade-up 0.45s ease forwards;
}

.reveal-list li:nth-child(1) { animation-delay: 0s; }
.reveal-list li:nth-child(2) { animation-delay: 0.08s; }
.reveal-list li:nth-child(3) { animation-delay: 0.16s; }

forwards, döngü bitince son keyframe stillerini tutar — yoksa öğeler taban kuraldaki opacity: 0’a geri sıçrayabilir. İşte animation-fill-mode burada devreye girer.

Tek seferlik girişte fill-mode

Giriş hareketleri çoğu zaman bir kez oynar. Fill-mode, gecikmeden önce ve son kareden sonra stillerin uygulanıp uygulanmayacağını belirler.

fill-mode both ile kart girişi

css 
@keyframes card-in {
from {
opacity: 0;
transform: translateY(1rem) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}

.card-enter {
animation: card-in 0.5s ease 0.1s both;
}

Buradaki shorthand: ad card-in, süre 0.5s, easing ease, gecikme 0.1s, fill-mode both. both, gecikme sırasında ilk keyframe’i uygular ve sonrasında son keyframe’i tutar.

Yön, play state ve ne zaman animate etmeyin

animation-direction: alternate tek döngülerde ileri, çiftlerde geri oynatır — keyframe’leri çoğaltmadan hafif bounce için kullanışlıdır. animation-play-state: paused çalışan animasyonu dondurur (dekoratif döngüde hover’da duraklatma gibi).

Basit hover renk değişimi için transition kullanmaya devam edin. Döngü, çok adımlı hikâye veya tek durum anahtarına bağlı olmayan hareket gerektiğinde animasyona geçin. Keyframe içinde transform ve opacity tercih edin; width, height veya top animate etmek daha ağır ve layout’u sıklıkla titretir.

Deneyin

  1. Yalnızca opacity ile üç duraklı (0% / 50% / 100%) pulse yapın; sonra az scale ekleyin.
  2. spin + linear + infinite spinner; ease’e geçip düzensiz hissi fark edin.
  3. Aynı fade-up keyframes ve 0s, 0.1s, 0.2s gecikmelerle üç rozeti stagger edin — forwards ile ve olmadan karşılaştırın.
  4. Bir panelde animation: card-in 0.5s ease 0.15s both; both’u kaldırıp geri sıçramayı izleyin.
  5. prefers-reduced-motion: reduce altında dekoratif döngülerde animation: none (veya kısa bir fade) kullanın.

Sık hatalar

  • Hover A→B solmasının «döngüye» girmesini beklemek — bu animation alanı, yalnız transition değil
  • animation-name ile @keyframes adı arasında yazım uyuşmazlığı — sessiz no-op
  • Durak veya reduced-motion planı olmadan büyük, dikkat çeken bölgelerde infinite
  • transform/opacity yetecekken layout özelliklerini (width, margin, top) animate etmek
  • Taban kuralda opacity: 0 ile tek seferlik reveal’larda forwards / both eksikliği

Özet

  • @keyframes zaman çizelgesini tanımlar; animation (veya longhand’ler) oynatır
  • iteration, direction, delay ve fill-mode — döngü, geri sekme, stagger ve yapışkan son için
  • transform/opacity tercih edin; dekoratif harekette prefers-reduced-motion’a saygı
  • Basit durum değişimleri transition; çok adımlı ve tekrarlayan hareket animation
  • Effects & Motion’da sırada: CSS Filters

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
7
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 61 / 63
Css Ders