0Pricing
Frontend Academy · Ders

Geçişler: Özellik Süre Zamanlama

CSS özelliklerindeki değişiklikleri akıcı biçimde canlandırmak için transition ekleyin, uygun süreleri seçin ve ease-in-out gibi yumuşatma işlevlerini belirleyin.

Geçişler: Özellik Süre Zamanlama, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 2. 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

CSS Geçişi Nedir?

CSS geçişi, bir özellik değiştiğinde (üzerine gelme, odaklanma veya sınıf geçişi sırasında) özelliği bir değerden diğerine canlandırır. Bu, bildirimseldir — CSS'e hangi özelliklerin nasıl geçirileceğini söylersiniz; geri kalanını tarayıcı yapar.

Temel Sözdizimi

transition: property duration timing-function delay. Birden çok geçişi virgülle ayırarak listeleyebilirsiniz.

.btn {
  background: #6366f1;
  transition: background-color 0.2s ease;
}
.btn:hover {
  background: #4f46e5;
}
// Browser smoothly animates the colour change

Özellik Değeri

Hangi özelliklerin geçirileceğini belirtin. Canlandırılabilen her özelliği geçirmek için all kullanabilirsiniz — ancak bu, ilgisiz özelliklerde istenmeyen geçişleri tetikleyebilir. Performans ve öngörülebilirlik için özellikleri açıkça belirtin.

.card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.15s linear;
}

/* Avoid 'all' in most cases */
.risky { transition: all 0.3s; }

Süre — Ne Kadar Sürer

Geçiş süresini s (saniye) veya ms (milisaniye) cinsinden belirtin. Mikro etkileşimler için kısa süreler (100–200 ms) kullanın. Bileşen durum değişiklikleri için orta süreler (200–400 ms) kullanın. Sayfa düzeyindeki canlandırmalar için daha uzun süreler (400 ms ve üzeri) kullanın.

Zamanlama İşlevleri — His

Zamanlama işlevleri hızlanma eğrisini denetler. Yaygın değerler: ease (varsayılan: yavaş başlangıç, hızlı orta bölüm, yavaş bitiş), linear (sabit hız), ease-in (yavaş başlar), ease-out (yavaş biter), ease-in-out. Özel eğriler: cubic-bezier(x1, y1, x2, y2).

.btn { transition: transform 0.2s ease-out; }
.toast { transition: opacity 0.3s ease-in-out; }
/* Custom cubic-bezier from cubic-bezier.com: */
.spring { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

Gecikme — Ne Zaman Başlamalı

Geçiş gecikmesi, animasyonu belirtilen süre geçtikten sonra başlatır. Birden fazla öğeyi kademeli olarak başlatmak veya farenin hızlı hareketlerinde yanlışlıkla tetiklenen üzerine gelme durumlarını önlemek için kullanın.

.dropdown-menu {
  opacity: 0;
  transition: opacity 0.2s ease 0.1s; /* 100ms delay */
}
.dropdown:hover .dropdown-menu {
  opacity: 1;
}

transitionend Olayı

JavaScript, bir geçişin ne zaman tamamlandığını transitionend olayıyla dinleyebilir. Bu, solma animasyonundan sonra öğeleri kaldırmak veya bir dizideki sonraki adımı tetiklemek için kullanışlıdır.

element.addEventListener('transitionend', (e) => {
  if (e.propertyName === 'opacity' && element.style.opacity === '0') {
    element.remove();
  }
});

Öğeleri Dönüştürme

transform özelliği GPU hızlandırmalıdır ve geçişler için idealdir. Yaygın dönüşümler: translate(), scale(), rotate(), skew(). transform ve opaklığı canlandırmak yalnızca birleştirme işlemini tetikler — en hızlı yol budur.

.card {
  transform: translateY(0) scale(1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}

Hangi Özelliklere Geçiş Uygulanabilir?

Sayısal değere sahip tüm özelliklere geçiş uygulanabilir: opaklık, renk, dönüşüm, genişlik, yükseklik, iç boşluk, kenarlık ve yazı tipi boyutu. display ve visibility gibi özelliklerde geçiş yumuşak gerçekleşmez; bunun yerine belirme ve kaybolma efekti için opaklığı kullanın.

Uygulama: Kip Penceresini Belirtme

Bir kip penceresi, biraz daha küçük bir boyuttan başlayarak büyür ve belirerek görünür. JavaScript ile .open sınıfını uygulayın; animasyonu CSS yönetir.

.modal {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.modal.open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

Performans: Dönüşüm ve Opaklıkla Yetinin

Düzeni tetikleyen özellikleri (genişlik, yükseklik, dış boşluk, üst ve sol konum) canlandırmak maliyetlidir; tarayıcı her karede düzeni yeniden hesaplar. Akıcı 60 kare/saniyelik animasyonlar için transform ve opacity ile yetinin.

Hızlı Kontrol

En iyi performans için hangi CSS özelliğini canlandırmayı tercih etmelisiniz?

Özet: CSS Geçişleri

transition: özellik süre zamanlama gecikmesi. 'all' yerine belirli özellikleri canlandırın. Doğal hareket için ease, ease-out ve ease-in-out kullanın. Eylemleri zincirlemek için transitionend olayını dinleyin. Performans için transform ve opacity ile yetinin. Geçişleri tetiklemek üzere JS'te sınıf değişimlerini kullanın.

Sıkça Sorulan Sorular

“Geçişler: Özellik Süre Zamanlama” dersi ücretsiz mi?

Evet — “Geçişler: Özellik Süre Zamanlama” 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Geçişler: Özellik Süre Zamanlama” dersinde ne öğreneceğim?

CSS özelliklerindeki değişiklikleri akıcı biçimde canlandırmak için transition ekleyin, uygun süreleri seçin ve ease-in-out gibi yumuşatma işlevlerini belirleyin. Frontend 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.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend 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 2. dersidir.

“Geçişler: Özellik Süre Zamanlama” 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend 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

  1. CSS Özel Özellikleri: Tanımlama ve Güncelleme
  2. Geçişler: Özellik Süre Zamanlama
  3. @keyframes Animasyonları
  4. prefers-reduced-motion Tercihine Uyma
← Frontend Academy Sayfasına Dön