CSS Animasyonları

CSS animasyonları basit animasyonları JavaScript kullanmadan yapmayı sağlar.

JavaScript, CSS animasyonlarını kontrol etmek ve biraz kodla daha iyi hale getirmek için kullanılabilir.

CSS Geçişleri

CSS geçişlerinin fikri basittir. Bir özelliği ve o özelliğin değişiminin nasıl anime edileceğini tanımlarız. O özellik değiştiğinde, tarayıcı animasyonu çizer.

Yani, yapmamız gereken tek şey özelliği değiştirmek. Özelliğin değişiminin nasıl çizileceğini tarayıcı halledecektir.

Örneğin, aşağıdaki CSS background-color özelliğindeki değişimlerin animasyonunu 3 saniye boyunca oynatır.

          .animated {
  transition-property: background-color;
  transition-duration: 3s;
}
        

Şimdi, eğer bir element .animated sahipse, background-color özelliğindeki herhangi bir değişiklik 3 saniye boyunca canlandırılır.

Arka planın animasyonunu oynatmak için aşagıdaki tuşa tıkla:

<button id="color">Bana tıkla</button>

<style>
  #color {
    transition-property: background-color;
    transition-duration: 3s;
  }
</style>

<script>
  color.onclick = function() {
    this.style.backgroundColor = 'red';
  };
</script>

CSS geçişlerini tanımlamak için 4 özellik vardır:

transition-property
transition-duration
transition-timing-function
transition-delay

Bunları biraz sonra açıklayacağız, şimdilik bilmemiz gereken, transition özelliği ile bu dört özelliği beraber şu sırayla tanımlayabildiğimiz: property duration timing-function delay. Ayrıca birden fazla özelliğin animasyonunu tek seferde tanımlayabiliriz.

Örneğin, bu tuş hem color hem de font-size özelliklerini canlandırır.

<button id="growing">Bana tıkla</button>

<style>
#growing {
  transition: font-size 3s, color 2s;
}
</style>

<script>
growing.onclick = function() {
  this.style.fontSize = '36px';
  this.style.color = 'red';
};
</script>

Şimdi, animasyon özelliklerini teker teker açıklayalım.

transition-property

transition-property özelliğine canlandıracağımız özelliklerin listesine yazarız. Örneğin left, margin-left, height, color.

Tüm özelliklere animasyon eklenemez ama çoğuna. all değeri “tüm özellikleri canlandır” anlamına gelir.

transition-duration

transition-duration özelliğinde animasyonun ne kadar sürmesi gerektiğini tanımlayabiliriz. Süre CSS Time Formatkurallarına uymalıdır: saniye olarak s ya da milisaniye ms.

transition-delay

transition-delay özelliği ile animasyon başlamadan önceki gecikmeyi tanımlayabiliriz. Örneğin, transition-delay: 1s ise animasyon değişimden 1 saniye sonra başlar.

Negatif değerler tanımlamak da mümkün. O zamansa animasyon ortadan başlar. Örneğin, transition-duration: 2s ise ve gecikme -1s ise animasyon 1 saniye sürer ve yarısından başlar.

Buradaki animasyon 0’dan 9’a kadar sayıları CSS translate özelliğini kullanarak kaydırıyor.

Sonuç

script.js

style.css

index.html

stripe.onclick = function() {
  stripe.classList.add('animate');
};

#digit {
  width: .5em;
  overflow: hidden;
  font: 32px monospace;
  cursor: pointer;
}

#stripe {
  display: inline-block
}

#stripe.animate {
  transform: translate(-90%);
  transition-property: transform;
  transition-duration: 9s;
  transition-timing-function: linear;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  Click below to animate:

  <div id="digit"><div id="stripe">0123456789</div></div>

  <script src="script.js"></script>
</body>

</html>

transform özelliğinin animasyonu böyle tanımlanmıştır:

          #stripe.animate {
  transform: translate(-90%);
  transition-property: transform;
  transition-duration: 9s;
}
        

Yukardaki örnekte JavaScript .animate sınıfını elemente ekler – ve animasyon başlar.

stripe.classList.add('animate');

Ayrıca animasyonu ‘ortadan’ da, belli bir sayıdan, başlatabiliriz. Yani, transition-delay özelliğine negatif değer vererek şu anki saniyeye karşılık gelen sayıdan başlatabiliriz.

Rakama tıklarsanız, animasyonu şu anki saniyeden başlatır.

Sonuç

script.js

style.css

index.html

stripe.onclick = function() {
  let sec = new Date().getSeconds() % 10;
  stripe.style.transitionDelay = '-' + sec + 's';
  stripe.classList.add('animate');
};

#digit {
  width: .5em;
  overflow: hidden;
  font: 32px monospace;
  cursor: pointer;
}

#stripe {
  display: inline-block
}

#stripe.animate {
  transform: translate(-90%);
  transition-property: transform;
  transition-duration: 9s;
  transition-timing-function: linear;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  Click below to animate:
  <div id="digit"><div id="stripe">0123456789</div></div>

  <script src="script.js"></script>
</body>
</html>

Bunu JavaScript’e bir satır fazladan ekleyerek yapabiliriz:

          stripe.onclick = function() {
  let sec = new Date().getSeconds() % 10;
  // for instance, -3s here starts the animation from the 3rd second
  stripe.style.transitionDelay = '-' + sec + 's';
  stripe.classList.add('animate');
};
        

transition-timing-function

Bu özellik, zamanlama fonksiyonu, animasyon işleminin süre boyunca nasıl dağıtılacağını tanımlamamızı sağlar. Örneğin, yavaş başlayıp sonra hızlanacak mı yoksa tam tersi mi gibi.

İlk bakışta en karmaşık özellik gibi gözükebilir. Ama üstünde biraz zaman harcayınca çok basitleşecektir.