Animasyonlar

Bu dersin sonunda kendiliğinden çalışan ve tekrar eden animasyonlar yazabilecek, hareketten rahatsız olan kullanıcılara da saygı gösterebileceksiniz.

Geçişten farkı

Geçişler iki durum arasında çalışır ve bir tetikleyici ister: fare gelir, durum değişir. Animasyonlar ise kendiliğinden başlar, birden çok adımdan oluşabilir ve tekrar edebilir.

İki bölümden oluşur:

1. @keyframes ile hareketin adımları tanımlanır.
2. animation ile bu hareket bir elemana uygulanır.

@keyframes

Hareketin adı siz belirlersiniz. from başlangıcı, to bitişi anlatır.

<div class="kutu">Merhaba</div>

@keyframes belir {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kutu {
  padding: 16px;
  background-color: lightblue;
  animation: belir 1s ease-out;
}

Animasyon sayfa açılınca bir kez çalışır. Tekrar görmek için kodda küçük bir değişiklik yapın.

Yüzdelerle ara adımlar

İkiden fazla adım için yüzde kullanın. 0% başlangıç, 100% bitiştir.

<div class="top"></div>

@keyframes zipla {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-40px);
  }

  100% {
    transform: translateY(0);
  }
}

.top {
  width: 40px;
  height: 40px;
  margin: 50px 16px 8px;
  border-radius: 50%;
  background-color: crimson;
  animation: zipla 1s ease-in-out infinite;
}

animation değerleri

• animation-name @keyframes adı.
• animation-duration Süre.
• animation-timing-function Hız eğrisi.
• animation-delay Başlamadan önceki bekleme.
• animation-iteration-count Tekrar sayısı. 3 veya sonsuz için infinite.
• animation-direction normal, reverse veya gidip gelen alternate.
• animation-fill-mode Animasyondan önce ve sonra hangi stilin geçerli olacağı.
• animation-play-state running veya paused.

Kısayol olarak hepsi tek satırda yazılabilir: animation: zipla 1s ease-in-out infinite;

animation-direction: alternate, hareketin geri dönüşünü de otomatik yapar. Önceki örnekteki ortadaki adıma gerek kalmaz. Farenizi kutunun üzerine getirince durması için animation-play-state kullanılmıştır:

<div class="nabiz">Üzerime gelince durur</div>

@keyframes atis {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.1);
  }
}

.nabiz {
  display: inline-block;
  padding: 12px 20px;
  margin: 16px;
  background-color: gold;
  animation: atis 0.8s ease-in-out infinite alternate;
}

.nabiz:hover {
  animation-play-state: paused;
}

Bitişte kalmak: animation-fill-mode

Animasyon bittiğinde eleman, normal stillerine geri döner. Son karede kalmasını istiyorsanız forwards yazın. both ise gecikme sırasında ilk kareyi, bitişte son kareyi uygular.

<div class="kutu normal">Geri dönüyor</div>
<div class="kutu kalici">Sonda kalıyor</div>

@keyframes kaydir {
  to {
    margin-left: 60px;
    background-color: teal;
  }
}

.kutu {
  width: 140px;
  padding: 12px;
  margin-bottom: 8px;
  background-color: lightblue;
}

.normal {
  animation: kaydir 1.5s;
}

.kalici {
  animation: kaydir 1.5s forwards;
}

Yükleniyor simgesi

to adımını tek başına yazabilirsiniz. Başlangıç elemanın mevcut stili olur. Klasik yükleme simgesi yalnızca birkaç satırdır:

<div class="yukleniyor" role="status" aria-label="Yükleniyor"></div>

@keyframes don {
  to {
    transform: rotate(360deg);
  }
}

.yukleniyor {
  width: 40px;
  height: 40px;
  margin: 16px;
  border: 5px solid lightgray;
  border-top-color: teal;
  border-radius: 50%;
  animation: don 0.8s linear infinite;
}

Hareket herkes için iyi değildir

Bazı insanlarda hareketli içerik baş dönmesine ve mide bulantısına yol açar. Bu kullanıcılar işletim sistemlerinde hareketi azaltma seçeneğini açar. CSS bu ayarı okuyabilir:

@media (prefers-reduced-motion: reduce) {
  .top {
    animation: none;
  }
}

Dikkate almanız gereken kurallar:

• Süren veya büyük hareketleri bu ayar açıkken kapatın.
• Hızlı yanıp sönen içerik sara nöbetini tetikleyebilir. Saniyede üç kereden fazla yanıp sönen hiçbir şey yapmayın.
• Sonsuz animasyonları az kullanın. Dikkat dağıtırlar. Yükleme simgesi gibi gerçekten bir şey anlatanlarla sınırlayın.

<style>
  @keyframes belir {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .kutu {
    animation: belir 1s;
  }
</style>

<div class="kutu">Merhaba</div>

<style>
  @media (prefers-reduced-motion: reduce) {
    .kutu {
      animation: none;
    }
  }
</style>

<div class="kutu">Kutu</div>

Bu derste öğrendikleriniz

• @keyframes hareketi adımlarla tanımlar, animation elemana uygular.
• infinite tekrar ettirir, alternate gidip getirir, forwards son karede tutar.
• to tek başına yazılabilir, başlangıç elemanın mevcut stilidir.
• prefers-reduced-motion kullanılır ve saniyede üç kereden fazla yanıp sönen içerikten kaçınılır.