Frontend Academy · Ders

@keyframes Animasyonları

@keyframes ile çok adımlı animasyonlar tanımlayın, bunları animation kısaltmasıyla uygulayın ve yinelemeyi, yönü ve fill-mode'u denetleyin.

@keyframes Animasyonları, CoddyKit'te ücretsiz bir Frontend 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Geçişler ve Animasyonlar

Geçişler, bir değişiklikle tetiklenen iki durum arasındaki hareketi canlandırır. @keyframes animasyonları otomatik olarak çalışır, döngüye girebilir, tersine çevrilebilir, sonsuza kadar oynatılabilir ve birden fazla ara adım tanımlayabilir; tetikleyici gerekmez.

@keyframes Tanımlama

@keyframes ile bir animasyon dizisi bildirin. Durumları yüzdelerle (0%, 50%, 100%) veya from ve to anahtar sözcüklerini kullanarak tanımlayın.

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

animation Kısa Yazımı

animation: name duration timing-function delay iteration-count direction fill-mode. Bu kısa yazımla animasyonu bir öğeye uygulayın.

.card {
  animation: fadeIn 0.4s ease-out forwards;
}

.loader {
  animation: pulse 1.5s ease-in-out infinite;
}

animation-iteration-count

Animasyonun kaç kez oynatılacağını belirler. infinite sonsuza kadar döngüde kalır. Bir sayı, animasyonu tam olarak belirtilen sayıda oynatır.

.spinner {
  animation: spin 1s linear infinite;
}

.badge {
  animation: bounce 0.6s ease 3; /* plays 3 times */
}

animation-direction

normal (varsayılan): her seferinde ileriye doğru. reverse: geriye doğru. alternate: önce ileriye, sonra geriye doğru. alternate-reverse. İleri-geri efektleri için alternate kullanışlıdır.

@keyframes swing {
  from { transform: rotate(-15deg); }
  to   { transform: rotate(15deg); }
}
.pendulum {
  animation: swing 1s ease-in-out infinite alternate;
}

animation-fill-mode

Animasyondan önce ve sonra öğenin durumunu denetler. forwards: öğe son ana karedeki durumda kalır. backwards: gecikme sırasında from durumunu uygular. both: her ikisini de uygular.

.entrance {
  opacity: 0;
  animation: fadeIn 0.5s ease 0.2s forwards;
  /* stays visible (opacity: 1) after animation ends */
}

animation-play-state

animation-play-state: paused | running değerini değiştirerek animasyonları JavaScript ile duraklatabilir ve sürdürebilirsiniz.

// Pause:
element.style.animationPlayState = 'paused';
// Resume:
element.style.animationPlayState = 'running';

Birden Fazla Animasyon

Animasyonları virgülle ayırarak tek bir öğeye birden fazla animasyon uygulayın. Her animasyon bağımsız olarak çalışır.

.icon {
  animation:
    rotate 2s linear infinite,
    pulse 1.5s ease-in-out infinite alternate;
}

animation-delay ile Kademeli Animasyonlar

Her öğenin gecikmesini artırarak liste öğelerini kademeli başlatın. CSS özel özellikleri bunu JavaScript ile kolaylaştırır.

/* CSS */
.list-item {
  animation: slideIn 0.3s ease forwards;
  animation-delay: calc(var(--index) * 60ms);
}

/* JS */
list.querySelectorAll('.list-item').forEach((el, i) => {
  el.style.setProperty('--index', i);
});

will-change — Tarayıcıya İpucu

will-change: transform, tarayıcıya özelliğin canlandırılacağını bildirir ve öğenin önceden kendi birleştirici katmanına taşınmasını sağlar. Dikkatli kullanın; çok fazla birleştirici katmanı GPU belleğini boşa harcar.

.animated {
  will-change: transform; /* only while animating */
}
/* Remove will-change after animation: */
el.addEventListener('animationend', () => el.style.willChange = 'auto');

Uygulama: İskelet Yükleme Ekranı

İskelet ekranları, içeriğin yüklenmekte olduğunu göstermek için parıltılı bir animasyon kullanır. Bir renk geçişi, yer tutucu şekillerin üzerinden kayar.

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    #e2e8f0 25%,
    #edf2f7 50%,
    #e2e8f0 75%
  ) 200% 0 / 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

Hızlı Kontrol

Hangi animation-fill-mode değeri, animasyon sona erdikten sonra öğenin son ana karedeki durumunu korumasını sağlar?

Özet: @keyframes Animasyonları

from/to veya yüzdeleri kullanarak @keyframes ile tanımlayın. animation kısa yazımıyla uygulayın. Döngü için iteration-count kullanın. İleri-geri hareket için alternate yönünü kullanın. Son durumu korumak için fill-mode: forwards ayarlayın. animation-delay ve CSS değişkenleriyle kademeli başlatın. Akıcı, birleştirilmiş animasyonlar için transform ve opacity ana karelerini kullanın.

Sıkça Sorulan Sorular

“@keyframes Animasyonları” dersi ücretsiz mi?

Evet — “@keyframes Animasyonları” 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“@keyframes Animasyonları” dersinde ne öğreneceğim?

@keyframes ile çok adımlı animasyonlar tanımlayın, bunları animation kısaltmasıyla uygulayın ve yinelemeyi, yönü ve fill-mode'u denetleyin. Frontend 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.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend 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.

“@keyframes Animasyonları” 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend 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

CSS Özel Özellikleri: Tanımlama ve Güncelleme
Geçişler: Özellik Süre Zamanlama
@keyframes Animasyonları
prefers-reduced-motion Tercihine Uyma

← Frontend Academy Sayfasına Dön