Yumuşatma İşlevleri: ease linear cubic-bezier
Yerleşik anahtar sözcükleri ve cubic-bezier() işlevlerini kullanarak geçişlerin hız eğrisini denetleyin.
Yumuşatma İşlevleri: ease linear cubic-bezier, CoddyKit'te ücretsiz bir CSS 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, 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.
Yumuşatma İşlevi Nedir?
Yumuşatma işlevi, bir geçişin veya animasyonun hız eğrisini, yani süresi boyunca ne kadar hızlı hızlanıp yavaşladığını kontrol eder.
linear
linear, geçiş boyunca sabit hızı korur. Sabit hareketin beklendiği yükleme çubukları ve ilerleme göstergeleri için kullanışlıdır.
<div class="progress-track"><div class="progress"></div></div>ease (Varsayılan)
ease hızlı başlar, ardından sona yaklaştıkça yavaşlar. Bu, varsayılandır ve çoğu kullanıcı arayüzü geçişinde doğal bir his verir.
ease-in
ease-in yavaş başlar ve hızlanır. Ekrandan çıkan öğeler için, yani çıkış animasyonlarında, uygundur.
<div class="modal">Open</div>
<div class="modal closing">Closing (faded to invisible)</div>ease-out
ease-out hızlı başlar ve yavaşlar. Ekrana giren öğeler için harikadır; öğeler enerjik biçimde gelir ve yumuşakça yerleşir.
<div class="modal opening">Modal content</div>ease-in-out
ease-in-out yavaş başlayıp yavaş biter ve ortada daha hızlı hareket eder. Döngülü veya ileri geri animasyonlar için en uygunudur.
cubic-bezier()
Dört kontrol noktasıyla özel bir kübik Bézier eğrisi tanımlar. Yay benzeri ve özel yumuşatma eğrileri oluşturmayı sağlar.
<div class="card">Card</div>cubic-bezier Değerlerini Okuma
Dört değer iki kontrol noktasını tanımlar: cubic-bezier(x1, y1, x2, y2). y ekseninde 1'in üzerindeki değerler aşma (yay) efektleri oluşturur. Eğrileri görselleştirmek için easings.net gibi araçları kullanın.
steps() İşlevi
steps(n, direction), animasyonu n adet ayrık ve eşit adıma böler. Sprite animasyonları ve daktilo efektleri için idealdir.
<div class="sprite"></div>steps() Yön Anahtar Sözcükleri
İkinci bağımsız değişken adımın nerede gerçekleşeceğini kontrol eder:
jump-start: ilk adım 0. zamandajump-end: son adım bitiş zamanında (varsayılan)jump-both: hem başlangıçta hem bitişte adımjump-none: iki uçta da adım yok
Modern: Karmaşık Eğriler için linear()
Yeni linear() işlevi, birden çok nokta üzerinden istenen yumuşatma eğrilerinin tanımlanmasını sağlar. Böylece cubic-bezier sınırlamaları olmadan yalnızca CSS ile yay ve sıçrama efektleri oluşturulabilir.
<div class="spring">Spring easing</div>Hızlı Kontrol
Tüm geçiş boyunca sabit hızı hangi yumuşatma işlevi korur?
Özet
Yumuşatma işlevleri animasyon hız eğrilerini kontrol eder. Yerleşik seçenekler: linear, ease, ease-in, ease-out, ease-in-out. Özel eğriler için cubic-bezier() kullanılır. Ayrık adımlar için steps() kullanılır. Yeni linear() işlevi, karmaşık ve yay benzeri eğriler oluşturmayı sağlar.
Sıkça Sorulan Sorular
“Yumuşatma İşlevleri: ease linear cubic-bezier” dersi ücretsiz mi?
Evet — “Yumuşatma İşlevleri: ease linear cubic-bezier” 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.
“Yumuşatma İşlevleri: ease linear cubic-bezier” dersinde ne öğreneceğim?
Yerleşik anahtar sözcükleri ve cubic-bezier() işlevlerini kullanarak geçişlerin hız eğrisini denetleyin. 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 2. dersidir.
“Yumuşatma İşlevleri: ease linear cubic-bezier” 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