Çalıştırılabilir CSS Dokümanları: CSS animasyon

Q: CSS'te animasyon nasıl yapılır?

Adımları @keyframes name { from { ... } to { ... } } ile tanımla, sonra onu animation özelliği ve bir süreyle bir elemente uygula: animation: name 1s ease-out;. Süre zorunludur, çünkü varsayılanı 0s'dir.

Q: Bir CSS animasyonu sonsuz döngüye nasıl sokulur?

animation-iteration-count: infinite ayarla ya da kısa yazıma infinite ekle: animation: spin 1s linear infinite;. Her döngüde ileri sonra geri oynatmak için alternate ekle.

Q: Bir CSS animasyonu nasıl duraklatılır?

Elemente animation-play-state: paused ver, örneğin :hover'da ya da JavaScript'in eklediği bir class ile. Onu tekrar running yapmak durduğu yerden devam ettirir.

Q: Azaltılmış hareket tercih eden kullanıcılar için animasyonlar nasıl kapatılır?

Animasyonu @media (prefers-reduced-motion: no-preference) { ... } ile sar ya da @media (prefers-reduced-motion: reduce) { ... } içinde kaldır. Sorgu, kullanıcının işletim sistemindeki hareketi azaltma ayarını takip eder.

Tek örnekte bir CSS animasyonu

Bir animasyonun iki parçası vardır: adımları tarif eden @keyframes ve onları bir süreyle bir elemente uygulayan animation özelliği. Bu kart sayfa yüklendiğinde kayarak ve belirerek geliyor:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS animation</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    @keyframes slide-in {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .card {
      padding: 16px;
      border-radius: 8px;
      background: #2563eb;
      color: white;
      animation: slide-in 0.6s ease-out both;
    }
    /* Keep only the fade for people who asked for less motion */
    @media (prefers-reduced-motion: reduce) {
      @keyframes slide-in { from { opacity: 0; } to { opacity: 1; } }
    }
  </style>
</head>
<body>
  <div class="card">Hello! This card animated in.</div>
</body>
</html>

Kodu düzenle (ya da süreyi 2s yap), önizleme yeniden yüklenir ve kartın tekrar gelişini izleyebilirsin. @media (prefers-reduced-motion: reduce) bloğu, keyframe'leri yalnızca sistemi hareketi azaltacak şekilde ayarlı okuyucular için bir solmayla değiştirir.

@keyframes söz dizimi

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

from, 0% ile, to ise 100% ile aynıdır.
İhtiyacın kadar yüzde adımı ekle. Aynı stillere sahip adımlar tek satırı paylaşabilir: 0%, 100% { ... }.
İlk ya da son keyframe'de eksik olan bir özellik, elementin kendi değerinden ya da ona doğru canlandırılır.
Ad (pulse), animation-name'e verdiğin şeydir. Büyük küçük harfe duyarlıdır ve none gibi bir anahtar kelime olmamalıdır.

animation özellikleri

Özellik	Ne ayarlar	Varsayılan
`animation-name`	hangi `@keyframes`'in çalışacağı	`none`
`animation-duration`	bir döngünün uzunluğu	`0s`
`animation-timing-function`	keyframe'ler arasındaki hız eğrisi	`ease`
`animation-delay`	ilk döngüden önceki bekleme (negatif değer ortasından başlatır)	`0s`
`animation-iteration-count`	döngü sayısı ya da `infinite`	`1`
`animation-direction`	`normal`, `reverse`, `alternate`, `alternate-reverse`	`normal`
`animation-fill-mode`	öncesi ve sonrası için stiller: `none`, `forwards`, `backwards`, `both`	`none`
`animation-play-state`	`running` ya da `paused`	`running`

Kısa yazım onları neredeyse her sırada alır. Tek kural, ilk süre değerinin duration, ikincisinin delay olmasıdır:

.loader {
  animation: pulse 1.2s ease-in-out 0.2s infinite alternate both;
  /*         name  duration timing  delay count   direction fill */
}

direction ve fill-mode, canlı

Bir direction, bir fill mode ve bir sayı seç, sonra Play'e bas. Kutu yolun sonuna doğru 200px ilerler. Gösterge, animasyon bittikten sonra kutunun nerede durduğunu söyler:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>direction and fill-mode</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    @keyframes move {
      from { transform: translateX(0); background: #2563eb; }
      to   { transform: translateX(200px); background: #16a34a; }
    }
    .track { width: 240px; background: #f3f4f6; margin: 10px 0; }
    #box { width: 40px; height: 40px; background: #f59e0b; }
    .controls { display: flex; flex-wrap: wrap; gap: 10px; }
  </style>
</head>
<body>
  <div class="controls">
    <label>direction <select id="dir"><option>normal</option><option>reverse</option><option>alternate</option></select></label>
    <label>fill-mode <select id="fill"><option>none</option><option>forwards</option><option>backwards</option><option>both</option></select></label>
    <label>count <select id="count"><option>1</option><option>2</option></select></label>
    <button id="play">Play</button>
  </div>
  <div class="track"><div id="box"></div></div>
  <p id="out">The amber color is the box's own style, used whenever no keyframe applies.</p>
  <script>
    const box = document.getElementById('box');
    const val = (id) => document.getElementById(id).value;
    document.getElementById('play').addEventListener('click', () => {
      box.style.animation = 'none';
      box.offsetWidth; // restart: let the browser see the animation removed
      box.style.animation = 'move 1s ease-in-out ' + val('count') + ' ' + val('dir') + ' ' + val('fill');
    });
    box.addEventListener('animationend', () => {
      const x = new DOMMatrix(getComputedStyle(box).transform).m41;
      document.getElementById('out').textContent = 'Finished at x = ' + Math.round(x) + 'px, color ' + getComputedStyle(box).backgroundColor;
    });
  </script>
</body>
</html>

Nelere bakmalı:

fill-mode: none (varsayılan): son kareden sonra kutu x = 0'a geri atlar ve tekrar kehribar rengine döner.
forwards: son keyframe'de kalır. normal ile bu x = 200 ve yeşildir; reverse ile x = 0 ve mavide biter, çünkü oynatılan son keyframe from'dur.
2 sayısıyla alternate gidip geri gelir, bu yüzden forwards bile x = 0'da biter.

Sonsuz döngüler: bir yükleme göstergesi

infinite sonsuza kadar tekrar eder ve her çocuktaki animation-delay onları sırayla hareket edecek şekilde kaydırır. Döngüleri sakin tut: yavaş, küçük, yanıp sönmeyen.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Loading dots</title>
  <style>
    @keyframes bounce {
      0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
      40%           { transform: scale(1);   opacity: 1; }
    }
    .dots { display: flex; gap: 8px; padding: 12px; }
    .dots span {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #2563eb;
      animation: bounce 1.4s ease-in-out infinite;
    }
    .dots span:nth-child(2) { animation-delay: 0.2s; }
    .dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes fade {
      0%, 80%, 100% { opacity: 0.4; }
      40%           { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .dots span { animation-name: fade; } /* no size change, only a soft fade */
    }
  </style>
</head>
<body>
  <div class="dots" role="status" aria-label="Loading"><span></span><span></span><span></span></div>
</body>
</html>

aria-label ile birlikte role="status", ekran okuyucu kullanıcılarına bir şeyin yüklendiğini söyler; noktalar tek başına bunu söylemez. Dönen bir daire için döndürme sayfasına bak.

Animasyonları duraklatmak ve kontrol etmek

animation-play-state: paused bir animasyonu olduğu yerde dondurur, running ise oradan devam ettirir. Duraklatmak için aşağıdaki çubuğun üzerine gel:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pause on hover</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    @keyframes slide {
      from { transform: translateX(0); }
      to   { transform: translateX(260px); }
    }
    .track { width: 300px; padding: 6px 0; background: #f3f4f6; }
    .bar { width: 40px; height: 24px; border-radius: 4px; background: #16a34a; animation: slide 3s ease-in-out infinite alternate; }
    .track:hover .bar { animation-play-state: paused; }
  </style>
</head>
<body>
  <div class="track"><div class="bar"></div></div>
  <p>Hover the gray track to pause.</p>
</body>
</html>

JavaScript'ten element.getAnimations() çalışan CSS animasyonlarını döndürür; her birinde pause(), play(), cancel() ve okuyup ayarlayabileceğin bir currentTime vardır. animationend olayı sonsuz olmayan bir animasyon bittiğinde, animationiteration ise her döngünün sonunda tetiklenir.

Azaltılmış harekete saygı göster ve asla yanıp sönme

Her animasyona iki erişilebilirlik kuralı uygulanır:

Azaltılmış hareket. İnsanlar hareket onları rahatsız ettiği için sistemlerinden daha az hareket isteyebilir. En güvenli kalıp, hareketi yalnızca daha azını istemedikleri durumda eklemektir:

@media (prefers-reduced-motion: no-preference) {
  .hero-title { animation: slide-in 0.8s ease-out both; }
}

Yanıp sönme yok. Bir saniyede üç kereden fazla yanıp sönen içerik nöbetleri tetikleyebilir. Hızlı, yüksek kontrastlı yanıp sönmeden tamamen kaçın.

Animasyonları akıcı tut

Mümkün olduğunda transform ve opacity canlandır. Tarayıcı onları sayfayı yeniden yerleştirmeden uygulayabilir, bu yüzden yavaş telefonlarda bile akıcı kalırlar. width, height, top, left ya da margin canlandırmak her karede düzeni yeniden hesaplar. Bir elementi taşımak için transform sayfasındaki translate()'i kullan.

Sık yapılan hatalar

Süre yok. animation: fade; hiçbir şey yapmaz, çünkü varsayılan süre 0s'dir.
Eşleşmeyen bir ad. animation-name, büyük küçük harf dahil @keyframes adıyla tam olarak eşleşmelidir.
Sonda geri atlamak. Son keyframe'i korumak için forwards (ya da both) ekle.
Gecikmeli bir animasyon başlamadan önce titreme. animation-delay sırasında element normal stillerini gösterir. backwards (ya da both) gecikme sırasında ilk keyframe'i uygular.
Aynı değeri ayarlayarak bir animasyonu yeniden başlatmak. Aynı animation'ı tekrar ayarlamak hiçbir şey yapmaz. Yukarıdaki Play butonunun yaptığı gibi onu kaldır, yeniden yerleşimi zorla (el.offsetWidth) ve tekrar ayarla.
display'i canlandırmak. Anında geçer. Bunun yerine opacity ve transform canlandır.

Sıkça Sorulan Sorular

CSS'te animasyon nasıl yapılır?

Adımları @keyframes name { from { ... } to { ... } } ile tanımla, sonra onu animation özelliği ve bir süreyle bir elemente uygula: animation: name 1s ease-out;. Süre zorunludur, çünkü varsayılanı 0s'dir.

animation-fill-mode: forwards ne işe yarar?

Animasyon bittikten sonra son keyframe'in stillerini korur. O olmadan element normal stillerine geri atlar. backwards gecikme sırasında ilk keyframe'i uygular, both ise ikisini de yapar.

Bir CSS animasyonu sonsuz döngüye nasıl sokulur?

animation-iteration-count: infinite ayarla ya da kısa yazıma infinite ekle: animation: spin 1s linear infinite;. Her döngüde ileri sonra geri oynatmak için alternate ekle.

CSS animation ile transition arasındaki fark nedir?

Bir transition, bir özellik değiştiğinde, genellikle hover'da ya da bir class değişiminde onu iki değer arasında canlandırır. Bir animation ise uygulandığı anda kendiliğinden çalışır, istenen sayıda keyframe'i olabilir ve tekrar edebilir, ters dönebilir ve duraklatılabilir.

Bir CSS animasyonu nasıl duraklatılır?

Elemente animation-play-state: paused ver, örneğin :hover'da ya da JavaScript'in eklediği bir class ile. Onu tekrar running yapmak durduğu yerden devam ettirir.

Azaltılmış hareket tercih eden kullanıcılar için animasyonlar nasıl kapatılır?

Animasyonu @media (prefers-reduced-motion: no-preference) { ... } ile sar ya da @media (prefers-reduced-motion: reduce) { ... } içinde kaldır. Sorgu, kullanıcının işletim sistemindeki hareketi azaltma ayarını takip eder.

İlgili kavramlar