Geçiş Özelliği Süresi ve Zamanlaması
Hangi özelliklerin geçiş yapacağını, bunun ne kadar süreceğini ve gecikmeyle ne zaman başlayacağını tanımlayın.
Geçiş Özelliği Süresi ve Zamanlaması, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. 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.
CSS Geçişi Nedir?
CSS geçişi, değer değiştiğinde (örneğin fare üzerine geldiğinde) iki özellik değeri arasında belirtilen süre boyunca ara değerleme yapar. JavaScript gerekmez.
transition-property
Hangi CSS özelliklerinin canlandırılacağını belirtir. Tüm canlandırılabilir özellikler arasında geçiş yapmak için all kullanın veya belirli özellikleri listeleyin.
<button>Save changes</button>transition-duration
Geçişin ne kadar süreceğini belirler. Saniye (s) veya milisaniye (ms) cinsinden zaman değerlerini kabul eder.
<div class="card">Card</div>transition Kısa Yazımı
Dört geçiş alt özelliğini birleştirir: property | duration | timing-function | delay.
<button class="btn">Submit</button>Birden Çok Geçiş
Farklı özellikleri bağımsız olarak canlandırmak için birden çok geçişi virgülle ayırarak listeleyin:
<div class="card">Card</div>transition-delay
Geçişin başlangıcını geciktirir. Animasyonları sıralamak veya bir geçişin diğeri başlamadan önce tamamlanmasını sağlamak için kullanışlıdır.
<nav>
<a class="nav-item" href="#">Home</a>
<a class="nav-item" href="#">About</a>
<a class="nav-item" href="#">Contact</a>
</nav>Temel Durumda Geçiş
transition özelliğini her zaman :hover durumuna değil, temel duruma yerleştirin. Bu, geçişin hem fare üzerine gelindiğinde hem de fare uzaklaştırıldığında oynatılmasını sağlar.
<button class="btn demo-active">Hover me</button>Neler Geçişe Tabi Tutulabilir?
Çoğu sayısal CSS özelliği geçişe tabi tutulabilir: renkler, boyutlar, opaklık, dönüşümler vb. Ayrık özellikler (örneğin display) sorunsuz biçimde ara değerlenemez; doğrudan bir sonraki değere geçer.
transition: all Uyarısı
transition: all kullanmak, canlandırmayı amaçlamadığınız özelliklerde beklenmedik animasyonlara neden olabilir. Üretim kodunda her zaman özellikleri açıkça belirtin.
Renklerde Geçiş
Renk geçişleri değerler arasında ara değerleme yapar. En iyi sonuçlar için aynı renk biçimini kullanın:
<button class="btn demo-active">Hover me</button>Geçiş ve Yerleşim Yıpranması
Performans için width, height, margin ve padding gibi yerleşimi tetikleyen özelliklerde geçiş kullanmaktan kaçının. Bunlar her animasyon karesinde yerleşimin yeniden hesaplanmasına neden olur. Bunun yerine transform ve opacity kullanın.
Hızlı Kontrol
Geçişin hem fare üzerine gelindiğinde hem de fare uzaklaştırıldığında oynatılmasını sağlamak için transition özelliği nereye yerleştirilmelidir?
Özet
CSS geçişleri, transition-property, duration, timing-function ve delay kullanarak özellik değişikliklerini zaman içinde yumuşatır. Çift yönlü animasyon için geçişleri temel duruma yerleştirin. Performans ve öngörülebilirlik için all yerine belirli özellik listelerini tercih edin.
Sıkça Sorulan Sorular
“Geçiş Özelliği Süresi ve Zamanlaması” dersi ücretsiz mi?
Evet — “Geçiş Özelliği Süresi ve Zamanlaması” 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.
“Geçiş Özelliği Süresi ve Zamanlaması” dersinde ne öğreneceğim?
Hangi özelliklerin geçiş yapacağını, bunun ne kadar süreceğini ve gecikmeyle ne zaman başlayacağını tanımlayın. 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 1. dersidir.
“Geçiş Özelliği Süresi ve Zamanlaması” 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
- Geçiş Özelliği Süresi ve Zamanlaması
- Yumuşatma İşlevleri: ease linear cubic-bezier
- Birden Fazla Özelliğe Geçiş Uygulama
- Performans: Dönüştürülebilen ve Yeniden Boyama Gerektiren Özellikler