@keyframes Sözdizimi ve Animasyon Özelliği
Animasyon adımlarını @keyframes ile tanımlayın ve animation kısa gösterimini kullanarak uygulayın.
@keyframes Sözdizimi ve Animasyon Özelliği, 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 Animasyonları Nedir?
CSS animasyonları, @keyframes kullanarak özellik değişikliklerini zaman içinde birden çok adımda gerçekleştirmeyi sağlar. Geçişlerin aksine animasyonlar otomatik olarak veya sınıf eklendiğinde başlar ve karmaşık dizileri destekler.
@keyframes Söz Dizimi
Animasyon adımlarını yüzde değerleriyle (%0 ile %100 arası) veya from/to anahtar sözcükleriyle tanımlayın:
<div class="fade-demo">Fades in</div>
<div class="pulse-demo"></div>
animation Özelliği
animation kısaltmasını veya alt özelliklerini kullanarak bir öğeye animasyon uygulayın:
<h1 class="hero-text">Welcome!</h1>
animation-name
@keyframes kuralına adıyla başvurur:
<div class="spinner"></div>
animation-duration
Animasyonun bir döngüsünün ne kadar süreceğini belirler:
<div class="pulse"></div>
Birden Çok Animasyon Adımı
Karmaşık, çok adımlı animasyonlar için yüzde değerli anahtar kareler kullanın:
<div class="slide-demo">Sliding in</div>
Birden Çok Özelliği Canlandırma
Her anahtar kare adımı, birden çok özelliği aynı anda canlandırabilir:
<div class="bounce-demo"></div>
Her Anahtar Kare İçin animation-timing-function
Zamanlama işlevi her anahtar kare adımı için ayarlanabilir; böylece tüm animasyon yerine tek tek ara noktalar arasındaki yumuşatma kontrol edilir.
Birden Çok Animasyon
Virgülle ayrılmış değerler kullanarak tek bir öğeye birden çok animasyon uygulayın:
<div class="element">Two animations combined</div>
animation-play-state
Animasyonları dinamik olarak duraklatın ve sürdürün:
<div class="card">Hover the card to pause<div class="spinner"></div></div>
CSS Animasyonu ve Geçiş Özeti
Seçiminizi dikkatli yapın:
- Geçiş: iki durum, durum değişikliğiyle tetiklenir, basittir
- Animasyon: çok adımlıdır, kendiliğinden başlar, döngüye girebilir ve daha fazla denetim sunar
Hızlı Kontrol
Hangi @keyframes anahtar sözcüğü animasyonun başlangıç durumunu belirtir?
Özet
@keyframes kullanarak from/to veya yüzde değerli ara noktalarla animasyon adımlarını tanımlayın. Ad, süre, zamanlama ve doldurma modunu belirterek animation kısaltmasıyla uygulayın. Birden çok animasyon virgülle ayrılır. Basit iki durumlu değişiklikler için geçişleri, karmaşık diziler için animasyonları kullanın.
Sıkça Sorulan Sorular
“@keyframes Sözdizimi ve Animasyon Özelliği” dersi ücretsiz mi?
Evet — “@keyframes Sözdizimi ve Animasyon Özelliği” 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.
“@keyframes Sözdizimi ve Animasyon Özelliği” dersinde ne öğreneceğim?
Animasyon adımlarını @keyframes ile tanımlayın ve animation kısa gösterimini kullanarak 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 1. dersidir.
“@keyframes Sözdizimi ve Animasyon Özelliği” 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
- @keyframes Sözdizimi ve Animasyon Özelliği
- Animasyon Yönü, Dolgu Modu ve Yineleme
- Animasyonları Zincirleme ve Sıralama
- prefers-reduced-motion ile Erişilebilir Animasyonlar