CSS Animasyonlar

CSS Animasyonlar

CSS, JavaScript veya Flash kullanmadan HTML öğelerinin animasyon efektlerini gerçekleştirebilir!

CSS

Bu bölümde, aşağıdaki özellikleri öğreneceksiniz:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Animasyonun tarayıcı desteği

Tablodaki rakamlar, bu özelliği tamamen destekleyen ilk tarayıcı sürümünü belirtir.

Özellik Chrome IE Firefox Safari Opera
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

CSS animasyonu nedir?

Animasyon, elementin bir stilden diğerine yavaşça geçiş yapmasını sağlar.

Herhangi sayıda CSS özelliğini rahatça değiştirebilirsiniz.

CSS animasyonlarını kullanmak için, öncelikle bazı anahtar çerçeveler belirlemelisiniz.

Anahtar çerçeveler, elementin belirli bir zamanda sahip olduğu stilleri içerir.

@keyframes kuralı

Eğer @keyframes Kuralında CSS stili belirtilmişse, animasyon belirli bir zamanda mevcut stilden yeni stile yavaşça geçiş yapacaktır.

Animasyonun etkili olabilmesi için, bir elemente bağlanması gerekmektedir.

Aşağıdaki örnekte, "example" animasyonunu <div> öğesine bağlanmıştır. Animasyon 4 saniye sürecektir ve <div> öğesinin arka plan rengini kırmızıdan sarıya yavaşça değiştirecektir:

Örnek

/* Animasyon kodu */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* Bu elemente animasyon etkisi uygulayın */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Deneyin

Dikkat:animation-duration Özelliği, animasyonun ne kadar süreceğini tanımlar. Belirtilmemişse animation-duration Özelliği belirtilmemişse, varsayılan değer 0s (0 saniye) olduğu için animasyon gerçekleşmez.

Yukarıdaki örnekte, "from" ve "to" anahtar kelimelerini kullanarak (0% (başlangıç) ve 100% (tamamlanma) temsil eder) ne zaman stili değişeceğimizi ayarladık.

Ayrıca, yüzdelik değer de kullanabilirsiniz. Yüzdelik kullanarak, ihtiyacınıza göre sınırsız sayıda stil değişikliği ekleyebilirsiniz.

Örnek, animasyonun %25 tamamlanırken, %50 tamamlanırken ve animasyon %100 tamamlanırken <div> öğesinin arka plan rengini değiştirecektir:

Örnek

/* Animasyon kodu */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* Animasyonu uygulanan element */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Deneyin

Aşağıdaki örnek, animasyonun %25, %50 ve %100 tamamladığında arka plan rengi ve <div> elementinin konumunu değiştireceğini gösterir:

Örnek

/* Animasyon kodu */
@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;}
}
/* Animasyonu uygulanan element */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Deneyin

Gecikmeli animasyon

animation-delay Bu özellik, animasyonun başlama gecikmesini belirler.

Aşağıdaki örnek, animasyonun başlamadan önce 2 saniye gecikme yapar:

Örnek

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

Deneyin

Negatif değerler de izin verilir. Negatif değer kullanıldığında, animasyon N saniye gibi oynar başlar.

Aşağıdaki örnekte, animasyon 2 saniye gibi oynar, ardından başlar:

Örnek

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

Deneyin

Animasyonun çalışması gereken kez sayısını ayarlayın

animation-iteration-count Bu özellik, animasyonun kaç kez çalışacağını belirler.

Aşağıdaki örnek, durmadan önce animasyonun 3 kez çalışacağını gösterir:

Örnek

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

Deneyin

Aşağıdaki örnek, "infinite" değeri kullanarak animasyonun sonsuza kadar devam etmesini sağlar:

Örnek

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

Deneyin

Ters veya alternatif olarak oynayan animasyon

animation-direction Bu özellik, animasyonun öne doğru, geriye doğru mı yoksa alternatif olarak mı oynayacağını belirler.

animation-direction Özellik aşağıdaki değerleri kabul eder:

  • normal - Animasyon normal oynar (öne doğru). Varsayılan değer
  • reverse - Animasyon ters yönde (geriye doğru) oynar (ters yönde). Varsayılan değer
  • alternate - Animasyon önce öne doğru, ardından geriye doğru oynar
  • alternate-reverse - Animasyon önce geriye doğru, ardından öne doğru oynar

Aşağıdaki örnek, animasyonun ters yönde (geriye doğru) çalışacağını gösterir:

Örnek

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

Deneyin

Aşağıdaki örnek, "alternate" değeri kullanarak animasyonun önce öne doğru, ardından geriye doğru çalışmasını sağlar:

Örnek

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

Deneyin

Aşağıdaki örnek, "alternate-reverse" değeri kullanarak animasyonun önce geriye doğru, ardından öne doğru çalışmasını sağlar:

Örnek

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

Deneyin

Animasyonun hız eğrisini belirtir

animation-timing-function Özellik, animasyonun hız eğrisini belirtir.

animation-timing-function Özellik aşağıdaki değerleri kabul eder:

  • ease - Yavaş başlayan, ardından hızlanarak ve yavaşlayan bir animasyonu belirleyin (varsayılan)
  • linear - Başlangıçtan bitişe aynı hızda olan animasyonu belirleyin
  • ease-in - Yavaş başlayan animasyonu belirleyin
  • ease-out - Yavaş biten animasyonu belirleyin
  • ease-in-out - Başlangıç ve bitiş daha yavaş olan animasyonu belirtin
  • cubic-bezier(n,n,n,n) - Üç katsayıBezier fonksiyonunda tanımladığınız değerleri çalıştırın

Aşağıdaki örnekler, kullanabileceğiniz bazı farklı hız eğrisi türlerini gösterir:

Örnek

#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;}

Deneyin

Animasyonun doldurma modunu belirtir

CSS animasyonları, ilk anahtar kare oynatılmadan önce veya en son anahtar kare oynatıldıktan sonra elementi etkilemez.animation-fill-mode özellik bu davranışı kapsayabilir.

Animasyon oynatılmadığında (başlangıçtan önce, sonundan sonra veya her ikisi de bittiğinde),animation-fill-mode Özellik, hedef elementin stillerini belirtir.

animation-fill-mode özelliği aşağıdaki değerleri kabul eder:

  • none - Varsayılan değer. Animasyon, çalışmadan önce veya sonra elemente herhangi bir stil uygulamaz.
  • forwards - Element, en son anahtar kare tarafından belirlenen stilleri tutar (animation-direction ve animation-iteration-count'a bağlıdır).
  • backwards - Element, birinci anahtar kare tarafından belirlenen stilleri alır (animation-direction'a bağlıdır) ve animasyon gecikme süresi boyunca bu değeri tutar.
  • both - Animasyon hem ileri hem de geri kurallarını izler, bu da iki yönde animasyon özelliklerini genişletir.

Örnek, <div> elementinin animasyonun sonunda en son anahtar karedeki stillerini tutmasını sağlar:

Örnek

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

Deneyin

Aşağıdaki örnekte <div> elementi, animasyonun başlamadan önce (animasyon gecikmesi sırasında) ilk anahtar kareden alınan tarz değerini alır:

Örnek

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

Deneyin

Aşağıdaki örnekte <div> elementi, animasyonun başlamadan önce ilk anahtar kareden alınan tarz değerini alır ve animasyonun sonunda son anahtar kareden alınan tarz değerini korur:

Örnek

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

Deneyin

Animasyon Kısaltılmış Özellikleri

Aşağıdaki örnek altı farklı animasyon özelliğini kullanır:

Örnek

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

Deneyin

Kısaltılmış kullanarak animation Özellikler, yukarıdaki örnekteki aynı animasyon etkisini de sağlayabilir:

Örnek

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

Deneyin

CSS Animasyon Özellikleri

Aşağıdaki tablo @keyframes kuralını ve tüm CSS animasyon özelliklerini listeler:

Özellik Açıklama
@keyframes Animasyon modunu düzenler.
animation Tüm animasyon özelliklerinin kısaltılmış özelliğini ayarlar.
animation-delay Animasyonun başlama gecikmesini düzenler.
animation-direction Animasyonun ileriye, geriye yoksa değişken olarak oynanacağını düzenler.
animation-duration Animasyonun bir dönemi tamamlaması için harcanması gereken süreyi düzenler.
animation-fill-mode Elementin animasyonu oynamadığı durumda (başlangıçta, bitimde veya her ikisi birden) tarzını düzenler.
animation-iteration-count Animasyonun oynanması gereken defa sayısını düzenler.
animation-name Belirtilen @keyframes animasyonunun adını düzenler.
animation-play-state Animasyonun çalışıp çalışmayacağını belirler.
animation-timing-function Animasyonun hız çizgisini belirler.