CSS’te hareket: geçişler ve animasyonlar
Geçiş, anahtar kare ve dönüşümlerle arayüze anlamlı hareket katar; hareketi hızlı ve harekete duyarlı kullanıcılara saygılı tutarsın.
Seviye 301 · 15 ders · 12 pratik lab
Dersler
Dönüşüm ve geçiş
- 2B dönüşümler: translate, scale, rotate
- 3B dönüşümler ve perspektif
- Geçiş özellikleri ve zamanlama
- Yumuşatma eğrileri: cubic-bezier ve steps
- Kısa görev: durumları akıcı geçen düğme
Animasyon
- @keyframes ve animasyon özellikleri
- Animasyonları sıralamak ve gecikme
- Yükleme göstergeleri ve iskelet ekranlar
- Kaydırmaya bağlı animasyonlar
- View Transitions ile sayfa geçişleri
- Kısa görev: adım adım tanıtım animasyonu
Performans ve erişilebilirlik
- Hangi özellikler ucuza canlandırılır
- will-change ve katmanlar
- Azaltılmış hareket için tasarım
- Bitirme görevi: canlı ama hızlı bir açılış sayfası
Pratik lablar
- Kartı üzerine gelince büyüt: Ürün kartını transform ile hafifçe büyüt ve gölgesini artır.
- Kart çevirme efekti yap: perspective ve backface-visibility ile ön ve arka yüzü olan bir kart çevirme efekti yaz.
- Dönüşüm sırasının etkisini göster: translate ve rotate sırası değişince farklı sonuç veren üç örnek hazırla ve bir menü açılışını düzelt.
- Düğmeye yumuşak geçiş ekle: Düğmenin renk, gölge ve odak durumlarına uygun süreli geçişler ekle.
- Doğru hızlanma eğrisini seç: Açılan çekmece için cubic-bezier eğrisi tasarla ve steps ile kare kare bir sayaç yap.
- Yükseklik geçişini sorunsuz yap: Akordeon açılırken height: auto'ya geçiş çalışmıyor; ızgara satırı veya interpolate-size ile çözüp performansı kontrol et.
- Yükleniyor göstergesi yap: @keyframes ile dönen bir yükleniyor göstergesi yap ve erişilebilir metin ekle.
- İskelet ekranı canlandır: Veri gelene kadar gösterilen iskelet kartlara parıltı animasyonu ekle.
- Adım adım tanıtım animasyonu kur: Dört öğeyi gecikmeli sırayla gösteren tanıtım animasyonunu yalnızca CSS ile kur.
- Kaydırmaya bağlı ilerleme çubuğu yap: Makale okunurken dolan ilerleme çubuğunu kaydırma zaman çizelgesiyle yaz.
- Sayfa geçişini View Transitions ile canlandır: Liste ve detay sayfası arasında ürün görselinin akarak geçtiği bir geçiş kur.
- Hızlı ve canlı açılış sayfası yap: Mimoza Yazılım açılış sayfasını yalnızca transform ve opacity animasyonlarıyla, hareket azaltma tercihine uyarak canlandır.
Kurs hakkında
Geçiş, anahtar kare ve dönüşümlerle arayüze anlamlı hareket katar; hareketi hızlı ve harekete duyarlı kullanıcılara saygılı tutarsın.
Ne öğreneceksin
- Dönüşüm ve geçiş
- Animasyon
- Performans ve erişilebilirlik
Ön koşullar
Aynı yolun 101 ve 201 düzeyindeki konularına hâkim olmalısın.
Lab ortamı
Dersler, tarayıcında açılan sana özel bir Kali Linux masaüstünde geçer; araçlar pencereli arayüzleriyle hazırdır. Kurulum gerekmez, bilgisayar ekranı önerilir.
Sık sorulan sorular
- Bu kurs benim düzeyime uygun mu?
- Kurs 301 düzeyindedir; daha düşük düzeydeki kursların konularını bildiğin varsayılır.
- Kurulum gerekir mi?
- Hayır. Her ders tarayıcında açılan sana özel bir lab ortamında geçer.
- Dersler nasıl işleniyor?
- Her ders 8 ile 10 adımdan ve bir kısa sınavdan oluşur. İlk adımlarda yazman gereken komut gösterilir, sonraki adımlarda yardım azalır; iki denemede takılırsan çözüm açılır.
- Ücretsiz deneyebilir miyim?
- Evet. Her kursun ilk üç dersi ücretsizdir.