Css Ders 7 – CSS Animasyonları

CSS animasyonları, JavaScript kullanmadan karmaşık görsel efektler oluşturulmasını sağlar ve kullanıcı deneyimini önemli ölçüde iyileştirebilir.

@keyframes Kuralı: Animasyonun Temeli

Tanım: @keyframes kuralı, bir animasyonun farklı aşamalarını tanımlar. Bu aşamalarda öğelerin hangi özelliklerinin nasıl değişeceği belirtilir.

Sözdizimi:

CSS
@keyframes animation-name {
  from { /* Animasyonun başlangıç durumu */ }
  to { /* Animasyonun bitiş durumu */ }
  /* Ara aşamalar (isteğe bağlı) */
  percentage { /* Animasyonun belirli bir yüzdesinde durum */ }
}

from ve to: Bu anahtar kelimeler, sırasıyla animasyonun başlangıç ve bitiş durumlarını tanımlar.

Yüzde (%) Kullanımı: Animasyonun belirli bir yüzdesinde öğenin nasıl görünmesi istendiğini belirtmek için yüzde değerleri kullanılabilir. Örnek: 50% { transform: translateX(100px); } animasyonun yarısında öğeyi 100 piksel sağa kaydırır.

Anahtar Kelimeler: from ve to yerine, 0% (başlangıç) ve 100% (bitiş) de kullanılabilir.

Basitçe Solma Animasyonu:

CSS
@keyframes fadeIn {
  from { opacity: 0; } /* Başlangıçta görünmez */
  to { opacity: 1; } /* Sonunda tamamen görünür */
}

Kaydırma Animasyonu:

CSS
@keyframes slideIn {
  from { transform: translateX(-100%); } /* Başlangıçta ekranın solunda */
  to { transform: translateX(0); } /* Sonunda görünür */
}

animation Özelliği: Animasyonu Uygulama

Tanım: animation özelliği, bir öğeye @keyframes ile tanımlanan animasyonu uygulamak için kullanılır. Birden fazla animasyon özelliğini tek bir yerde belirtmeyi sağlar.

Sözdizimi:

CSS
animation: animation-name animation-duration timing-function delay iteration-count direction;

Özellikler:

  • animation-name: @keyframes ile tanımlanan animasyonun adını belirtir.
  • animation-duration: Animasyonun süresini belirtir (saniye veya milisaniye). Örneğin: 2s, 500ms.
  • animation-timing-function: Animasyonun hızını kontrol eder. Aşağıdaki değerler kullanılabilir:
    • ease: Varsayılan değerdir. Başlangıçta yavaş, ortada hızlı ve sonunda yavaş bir hızlandırma sağlar.
    • linear: Sabit hızda ilerler.
    • ease-in: Yavaş başlar ve hızlanır.
    • ease-out: Hızlı başlar ve yavaşlar.
    • ease-in-out: Hem yavaş başlar hem de yavaşlar.
    • cubic-bezier(x1, y1, x2, y2): Özel bir hız eğrisi tanımlar.
  • animation-delay: Animasyonun başlaması için gecikme süresini belirtir (saniye veya milisaniye). Örneğin: 1s.
  • animation-iteration-count: Animasyonun kaç kez tekrarlanacağını belirtir. Sayısal bir değer veya infinite anahtar kelimesi kullanılabilir.
  • animation-direction: Animasyonun yönünü belirtir:
    • normal: Başlangıçtan bitişe doğru oynatır (varsayılan).
    • reverse: Bitişten başlangıca doğru oynatır.
    • alternate: Her tekrarda yön değiştirir.
    • alternate-reverse: İlk tekrarda bitişten başlangıca, sonraki tekrarlarda başlangıçtan bitişe oynatır.
  • animation-fill-mode: Animasyonun başlamadan ve bittikten sonra öğenin nasıl görünmesini istediğimizi belirtir:
    • none: Varsayılan değerdir. Animasyon bittikten sonra öğe orijinal durumuna döner.
    • forwards: Animasyon bittikten sonra son durum korunur.
    • backwards: Animasyon başlamadan önce başlangıç durumu uygulanır.
    • both: Hem forwards hem de backwards etkilerini birleştirir.

Örnek:

CSS
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: fadeIn 2s ease-in-out infinite alternate;
}

Kaynak: https://developer.mozilla.org/en-US/docs/Web/CSS

Etiketler