CSS Dersleri 43 - Animasyon Yapımı

Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS'de Animasyon Yapımı Konusunu öğreneceğiz.

CSS, JavaScript veya Flash kullanmadan HTML etiketleriyle animasyon oluşturmamızı sağlar. Bu animasyonlar eski tür tarayıcılarda desteklenmemektedir.

CSS Animasyon Nedir ?

CSS'de animasyon olayları, bir etiketin sırayla bir stilden diğer stile geçmesine izin verir. İstediğiniz kadar CSS özelliğini istediğiniz kadar değiştirebilirsiniz.CSS animasyonunu oluşturmak için öncelikle keyframe'ler oluşturmalıyız.Bu keyframe özelliği, bir etiketin belirli zamanlarda hangi stillere sahip olacağını beirler.

CSS @keyframes Kullanımı

CSS'de keyframes kuralı, animasyonların belirlenen kademelerde ilgili stilleri kullanmasını sağlar. Bir animasyon oluşturmak için, animasyonları bir etiketle ilişkilendirmeniz gerekmektedir.

Aşağıdaki örnek, "example" animasyonunu div etiketine bağlandığını görürsünüz. Animasyon 4 saniye sürecektir ve div etiketinin arka plan rengini kademeli olarak "kırmızı"dan "sarı"ya değiştirecektir.

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Not : animation-duration özelliği, bir animasyonun ne kadar süreceğini tanımlar.Eğer bir değer belirtilmezse, varsayılan değer 0 olduğu için animasyon başlayamacaktır.

Yukarıdaki örnekte, "from" ve "to" anahtar kelimeleri kullanarak stilin ne zaman değişeceğini tanımladık. Bu animasyon tamamlama süreci 0'dan başlayıp 100'e kadar devam eden bir yüzdeliktir.

Yüzde kullanmak da mümkündür. Yüzde kullanarak istediğiniz kadar stil değişikliği ekleyebilirsiniz.

Aşağıdaki örnek, animasyonun %25 tamamlandığında, %50 tamamlandığında ve %100 tamamlandığında div etiketinin arka plan rengini değiştirir.

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}


div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Diğer bir örnek olarak aşağıdaki kod, animasyonun %25 tamamlandığında, %50 tamamlandığında ve %100 tamamlandığında hem arka plan rengini hem de etiketin konumunu değiştirecektir:

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

CSS animation-delay Kullanımı

CSS'de animation-delay özelliği, bir animasyonun başlamadan önce gecikme oluşturmak için kullanılır.

Aşağıdaki örnek, animasyonum başlatmadan önce 2 saniyelik bir gecikme ile başlayacağını söyler:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

Bu özellik negatif değerde alabilir. Negatif değerler kullanılıyorsa, animasyonun N saniye ileri öteler.

Aşağıdaki örnekte, animasyonu 2. saniyede başlatacaktır:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

Animasyonu tekrar ettirmek

CSS'de animation-iteration-count özelliği, bir animasyonun kaç kez çalıştırılacağını belirtir.

Aşağıdaki örnek, animasyonun durmadan önce 3 kez çalıştıracaktır:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

Bir animasyonun sonsuza kadar devam etmesini sağlamak için "infinite" değerini kullanır:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

Animasyonu Ters Yönde veya Alternatif Döngülerde Çalıştırın

CSS'de animation-direction özelliği, bir animasyonun ileri mi, geri mi yoksa alternatif döngülerde mi oynatılacağını belirtir.

animation-direction özelliği aşağıdaki değerlere sahip olabilir:

• normal - Animasyon normal olarak oynatılır (ileri). Varsayılandır
• reverse - Animasyon ters yönde oynatılır (geriye doğru)
• alternate - Animasyon önce ileri, sonra geri oynatılır
• alter-reverse - Animasyon önce geriye, sonra ileriye oynatılır

Aşağıdaki örnek, animasyonu ters yönde (geriye doğru) çalıştıracaktır:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

Aşağıdaki örnek, animasyonun önce ileri, sonra geriye doğru çalışmasını sağlamak için "alternate" değerini kullanır:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

Aşağıdaki örnek, animasyonun önce geriye, sonra ileriye doğru çalışmasını sağlamak için "alter-reverse" değerini kullanır:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

Animasyon İçin Hazır Geçiş Efektleri Kullanmak 

CSS'de animation-timing-function özelliği, animasyonun efektini belirtir.

animasyon zamanlama işlevi özelliği aşağıdaki değerlere sahip olabilir:

• ease - önce yavaş, sonra hızlı, sonra yavaş sonlanan bir geçiş efekti belirtir (bu varsayılandır)
• linear - baştan sona aynı hızda bir geçiş efekti belirtir
• ease-in - yavaş başlangıçlı bir geçiş efekti belirtir
• ease-out - yavaş sonlu bir geçiş efekti belirtir
• ease-in-out - yavaş bir başlangıç ve bitiş ile bir geçiş efekti belirtir
• cubic-bezier(n,n,n,n) - cubic-bezier metodunda kendi değerlerinizi tanımlamanıza izin verir

Aşağıdaki örnek, kullanılabilecek farklı bazı geçiş efektlerini göstermektedir:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 50px;
  background-color: red;
  font-weight: bold;
  position: relative;
  animation: mymove 5s infinite;
}

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

@keyframes mymove {
  from {left: 0px;}
  to {left: 300px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>

</body>
</html>

CSS Animasyon fill-mode Kullanımı

CSS'de animasyonlar, ilk animasyon karesi oynatılmadan önce veya son animasyon karesi oynatıldıktan sonra bir öğeyi etkilemez. Animasyon fill-mode özelliği bu davranışı geçersiz kılabilir.

CSS fill-mode özelliği, animasyon oynatılmadığında (başlamadan önce, sona erdikten sonra veya her ikisi) hedef öğe için bir stil belirtir.

fill-mode özelliği aşağıdaki değerlere sahip olabilir:

• none - Varsayılan değer. Animasyon, yürütülmeden önce veya sonra öğeye herhangi bir stil uygulamaz
• forwards - Öğe, son ana kare tarafından ayarlanan stil değerlerini korur (animasyon yönüne ve animasyon yineleme sayısına bağlıdır)
• backwards - Öğe, ilk animasyon karesi tarafından belirlenen stil değerlerini alır (animasyon yönüne bağlıdır) ve bunu animasyon gecikme süresi boyunca korur
• both - Animasyon, hem ileri hem de geri için kuralları takip edecek ve animasyon özelliklerini her iki yönde genişletecektir.

Aşağıdaki örnek, animasyon sona erdiğinde div etiketinin son ana karedeki stil değerlerini korumasına izin verir:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-fill-mode: forwards;
}

@keyframes example {
  from {top: 0px;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

</body>
</html>

Aşağıdaki örnek, div etiketinin animasyon başlamadan önce (animasyon gecikmesi süresi boyunca) ilk ana kare tarafından ayarlanan stil değerlerini almasını sağlar:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

@keyframes example {
  from {top: 0px; background-color: yellow;}
  to {top: 200px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>


<div></div>

</body>
</html>

Aşağıdaki örnek, div etiketinin animasyon başlamadan önce ilk ana kare tarafından ayarlanan stil değerlerini almasına ve animasyon sona erdiğinde son ana kareden gelen stil değerlerini korumasına olanak tanır:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-delay: 2s;
  animation-fill-mode: both;
}

@keyframes example {
  from {top: 0px; background-color: yellow;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>


<div></div>

</body>
</html>

CSS Animation Kısa Kullanımı

Aşağıdaki örnek, animasyon özelliklerinden altı tanesini kullanır:

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Yukarıdakiyle aynı animasyon efekti, kısa kullanım olarak animation özelliği kullanılarak elde edilebilir:

div {
  animation: example 5s linear 2s infinite alternate;
}