0Pricing
CSS Academy · Ders

Animasyon Yönü, Dolgu Modu ve Yineleme

Animasyonun oynatma yönünü, kaç kez tekrarlanacağını ve fill-mode ile son durumunu denetleyin.

Animasyon Yönü, Dolgu Modu ve Yineleme, 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.

animation-iteration-count

Animasyonun kaç kez tekrarlanacağını denetler. Kesintisiz döngü için infinite kullanın.

<div class="spinner"></div>
<div class="pulse"></div>

animation-direction

Değişimli döngülerde oynatma yönünü denetler:

  • normal — her yinelemede ileri doğru oynatır
  • reverse — geriye doğru oynatır
  • alternate — ileri ve ardından geri doğru, dönüşümlü olarak oynatır
  • alternate-reverse — geri ve ardından ileri doğru oynatır
<div class="bounce"></div>

animation-fill-mode

Animasyon başlamadan önce ve sona erdikten sonra öğeye ne olacağını tanımlar:

  • none — varsayılandır, özgün duruma geri döner
  • forwards — tamamlandıktan sonra son anahtar kareyi korur
  • backwards — gecikme sırasında ilk anahtar kareyi uygular
  • both — hem geriye hem ileriye yönelik davranışları uygular

forwards Dolgu Modu

En yaygın kullanım alanı, animasyon tamamlandıktan sonra öğeyi canlandırılmış son durumunda tutmaktır:

<p class="item">I fade in and stay visible</p>

backwards Dolgu Modu

Bir gecikme olduğunda backwards, gecikme süresi boyunca öğenin ilk anahtar kare durumunda başlamasını sağlar ve animasyon başlamadan önce özgün durumun kısa süreli görünmesini önler:

<p class="item">Starts invisible during the delay</p>

both Dolgu Modu

both, forwards ve backwards davranışlarını birleştirir — animasyondan önce veya sonra kısa süreli görünmemesi gereken öğeler için en öngörülebilir seçenektir.

animation-delay

Animasyonun başlamasını geciktirir. Negatif gecikmeler, animasyonun ortasından başlamasını sağlar; bu, birden çok animasyonu eşzamanlamak için kullanışlıdır:

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>

Kademeli Animasyon Deseni

nth-child gecikmelerini kullanan yalnızca CSS ile oluşturulmuş kademeli animasyon:

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>

Duraklatma ve Sürdürme

animation-play-state değerini değiştirerek animasyon durumunu JavaScript ile değiştirin:

<div class="spinner" id="js-spinner"></div>
<button onclick="const s=document.getElementById('js-spinner').style; s.animationPlayState = s.animationPlayState === 'paused' ? 'running' : 'paused';">Pause / Resume</button>

Animasyonları Sıfırlama

Bir CSS animasyonunu yeniden oynatmak için sınıfı remove ile kaldırıp yeniden add edin. Tarayıcı, kaldırma ile ekleme arasında yeniden akışı zorlayarak bir hile uygular.

<div class="box" id="reset-box"></div>
<button onclick="const el=document.getElementById('reset-box'); el.classList.remove('animate'); void el.offsetWidth; el.classList.add('animate');">Replay Animation</button>

Negatif animation-delay

Negatif bir gecikme kullanarak animasyonu oynatmanın ortasından başlatın — bu, eşzamanlanmış arka plan desenleri veya zaten hareket hâlinde görünmesi gereken döngülü öğeler için kullanışlıdır.

<div class="star"></div>
<div class="star"></div>
<div class="star"></div>

Hızlı Kontrol

Hangi animation-fill-mode değeri, animasyon sona erdikten sonra öğeyi son anahtar kare durumunda tutar?

Özet

animation-iteration-count: infinite sonsuza kadar döngüye girer. animation-direction: alternate ileri ve geri hareket eder. animation-fill-mode: forwards son durumu korur. animation-fill-mode: both en güvenli seçenektir. Eşzamanlanmış animasyonları kaydırmak için negatif gecikmeleri kullanın.

Sıkça Sorulan Sorular

“Animasyon Yönü, Dolgu Modu ve Yineleme” dersi ücretsiz mi?

Evet — “Animasyon Yönü, Dolgu Modu ve Yineleme” 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.

“Animasyon Yönü, Dolgu Modu ve Yineleme” dersinde ne öğreneceğim?

Animasyonun oynatma yönünü, kaç kez tekrarlanacağını ve fill-mode ile son durumunu 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.

“Animasyon Yönü, Dolgu Modu ve Yineleme” 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

  1. @keyframes Sözdizimi ve Animasyon Özelliği
  2. Animasyon Yönü, Dolgu Modu ve Yineleme
  3. Animasyonları Zincirleme ve Sıralama
  4. prefers-reduced-motion ile Erişilebilir Animasyonlar
← CSS Academy Sayfasına Dön