Animasyonları Zincirleme ve Sıralama
Birden fazla animasyonu kademeli gecikmelerle zincirleyerek karmaşık diziler oluşturun.
Animasyonları Zincirleme ve Sıralama, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
Animasyonlar Neden Sıralanır?
Karmaşık kullanıcı arayüzü efektleri genellikle sırayla gerçekleşen birden çok animasyon gerektirir: bir öğe içeri kayar, duraklar ve ardından soluklaşarak kaybolur. CSS, animasyonları JavaScript olmadan birbirine bağlamak için çeşitli araçlar sunar.
Sıralama İçin animation-delay Kullanma
En basit sıralama yöntemi, sonraki animasyonun ne zaman başlaması gerektiğini önceki animasyonun süresine göre hesaplamaktır:
<div class="element">Slides in, then fades out</div>
Çok Adımlı Anahtar Kareler
Tek bir öğe için en temiz yaklaşım, tüm diziyi yüzde değerli ara noktalarla tek bir @keyframes kuralında kodlamaktır:
<div class="toast">Notification toast</div>
Süre İçin CSS Özel Özellikleri
Zincirlenmiş animasyonlar arasında kolayca eşgüdüm sağlamak için süreleri CSS değişkenlerinde saklayın:
<div class="box">Custom-property-driven timing</div>
animation-timeline (Modern)
Web Animasyonları API'si ve kaydırmayla bağlantılı animasyonlar (ScrollTimeline), gecikme hesaplamaları olmadan gelişmiş sıralamalara olanak tanır. Bu, karmaşık CSS animasyonlarının düzenlenmesinin geleceğidir.
CSS Özel Özelliğiyle Kademeli Animasyon
Kademeli gecikmeleri satır içinde veya JavaScript aracılığıyla ayarlanan CSS özel özelliklerinden yönlendirin:
<div class="item" style="--delay:0ms">Item 1</div>
<div class="item" style="--delay:120ms">Item 2</div>
<div class="item" style="--delay:240ms">Item 3</div>
JavaScript ile Yönlendirilen Sıralama
Birden çok öğenin kesin sıralamaları için Web Animasyonları API'sini veya GSAP gibi bir kitaplığı kullanın. CSS tek başına, karmaşık bağımlılıkları olan bağımsız öğeleri eşgüdümleme konusunda sınırlıdır.
Dikkat Animasyonları
Nabız atıp durulan bir dikkat animasyonu sıralaması:
<div class="notification">New message!</div>
AnimationEnd Olayı
Sonraki adımı programlı olarak tetiklemek için JavaScript'te animationend olayını dinleyin:
<div class="box" id="ae-box">Watch me</div>
<script>
const el = document.getElementById('ae-box');
el.addEventListener('animationend', (e) => {
if (e.animationName === 'slideIn') {
el.classList.add('phase-2');
el.textContent = 'animationend fired!';
}
});
</script>
Sayfa Geçişi Deseni
Sınıf değiştirme kullanan bir CSS sayfa geçişi sıralaması:
<div class="page-leaving">Leaving page</div>
<div class="page-entering">Entering page</div>
Yükleme Durumu İskeleti
Ofsetleri kullanan çok adımlı bir iskelet yükleme animasyonu:
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
Hızlı Kontrol
CSS'te tek bir öğe için eksiksiz, çok adımlı bir animasyon sıralamasını kodlamanın en iyi yolu nedir?
Özet
CSS animasyonu sıralaması, önceki sürelerle zamanlanan gecikmeleri, yüzde değerli ara noktalar içeren çok adımlı @keyframes kurallarını veya süreleri tutan özel özellik değişkenlerini kullanır. animationend olayı, JavaScript tarafından tetiklenen sıralı aşamaları mümkün kılar. Birden çok öğenin karmaşık eşgüdümü için Web Animasyonları API'sini değerlendirin.
Sıkça Sorulan Sorular
“Animasyonları Zincirleme ve Sıralama” dersi ücretsiz mi?
Evet — “Animasyonları Zincirleme ve Sıralama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“Animasyonları Zincirleme ve Sıralama” dersinde ne öğreneceğim?
Birden fazla animasyonu kademeli gecikmelerle zincirleyerek karmaşık diziler oluşturun. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Animasyonları Zincirleme ve Sıralama” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- @keyframes Sözdizimi ve Animasyon Özelliği
- Animasyon Yönü, Dolgu Modu ve Yineleme
- Animasyonları Zincirleme ve Sıralama
- prefers-reduced-motion ile Erişilebilir Animasyonlar