Birden Fazla Özelliğe Geçiş Uygulama
Virgülle ayrılmış değerleri kullanarak aynı anda birden fazla CSS özelliğine geçiş uygulayın.
Birden Fazla Özelliğe Geçiş Uygulama, 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.
Birden Çok Özellikte Neden Geçiş Kullanılır?
Gerçek kullanıcı arayüzü etkileşimlerinde genellikle birden çok özellik aynı anda değişir; örneğin fare üzerine gelindiğinde arka plan rengi, gölge ve ölçek. CSS, her özellik için bağımsız yumuşatma ve süre kullanılmasını destekler.
Virgülle Ayrılmış Geçişler
Birden çok geçişi virgülle ayırarak listeleyin. Her giriş bağımsız olarak bir özelliğe uygulanır:
<div class="card">Card</div>Her Özellik için Farklı Süreler
Katmanlı ve doğal bir his vermek için her özelliğe farklı bir hız verin:
<button class="btn">Hover-ready button</button>Her Özellik için Farklı Yumuşatma İşlevleri
Her özelliğin uygun bir his vermesi için yumuşatma işlevlerini bir arada kullanın:
<div class="modal">Modal content</div>transition: all Dezavantajları
transition: all kullanmak, değişen her özelliğin aynı zamanlamayı kullanması anlamına gelir. Bu, doğrudan geçmesi gereken özelliklerde (örneğin görüntüleme veya konum değişikliklerinde) istenmeyen animasyonlara neden olabilir.
Kesintiye Uğrayabilen Geçişler
CSS geçişleri kesintiye uğrayabilir. Fare üzerine gelme durumu geçişin ortasında sona ererse geçiş, son durumdan değil, o anki canlandırılan değerden tersine döner. Bu, rahatsız edici sıçramalar olmadan yumuşak geri dönüşler sağlar.
Giriş ve Çıkışı Eşgüdümleme
:hover durumundaki geçişleri geçersiz kılarak fare üzerine gelme ve fare uzaklaştırma için farklı süreler kullanın:
<div class="card demo-active">Card</div>Gecikmeyle Kademelendirme
Kademeli bir görünme efekti oluşturmak için kardeş öğelere giderek artan gecikmeler ekleyin:
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>Kademelendirme için CSS Özel Özellikleri
Kademelendirme gecikmesini JavaScript veya HTML ile ayarlanan bir CSS özel özelliğinden atayın:
<div class="item">Item</div>Geçiş ve Animasyon Karşılaştırması
İki durumlu değişiklikler (bekleme → fare üzerine gelme) için geçişleri kullanın. Çok adımlı diziler, döngülü efektler veya kendiliğinden başlayan animasyonlar için @keyframes animasyonlarını kullanın.
will-change Optimizasyonu
Önceden optimizasyon yapılabilmesi için hangi özelliklerin canlandırılacağı konusunda tarayıcıya ipucu verin. Bunu ölçülü kullanın; GPU belleği tüketir.
<div class="card">Card</div>Hızlı Kontrol
Bir kartın temel durumunda transition: background 150ms, transform 250ms bulunuyor. Kullanıcı animasyonun ortasında imleci hızla uzaklaştırırsa ne olur?
Özet
Virgülle ayrılmış geçişler, her özelliğin kendi süresine, yumuşatma işlevine ve gecikmesine sahip olmasını sağlar. transition: all kullanmaktan kaçının — bu, istemeden özelliklerin canlandırılmasına yol açabilir. Geçişler kesilebilir ve mevcut konumlarından başlayarak akıcı biçimde tersine çevrilebilir. Kademeli efektler için gecikmeleri kullanın.
Sıkça Sorulan Sorular
“Birden Fazla Özelliğe Geçiş Uygulama” dersi ücretsiz mi?
Evet — “Birden Fazla Özelliğe Geçiş Uygulama” 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.
“Birden Fazla Özelliğe Geçiş Uygulama” dersinde ne öğreneceğim?
Virgülle ayrılmış değerleri kullanarak aynı anda birden fazla CSS özelliğine geçiş uygulayı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 3. dersidir.
“Birden Fazla Özelliğe Geçiş Uygulama” 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