CSS Animasyon

CSS Animasyon

CSS, JavaScript veya Flash kullanmadan HTML elementlerinin animasyon etkilerini oluşturabilir!

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 kademeli olarak geçiş yapmasını sağlar.

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

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

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 kademeli olarak değişir.

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

Aşağıdaki örnek, "example" animasyonunu <div> elementine bağlar. Animasyon 4 saniye sürecek ve <div> elementinin arka plan rengini kırmızıdan maviye kademeli olarak 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;
}

Kişisel olarak 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ğundan, animasyon gerçekleşmez.

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

Sizin için gerektiği gibi herhangi bir sayıda stil değişikliği ekleyebilirsiniz.

Aşağıdaki örnek, animasyonun %25 tamamlanırken, %50 tamamlanırken ve animasyonun %100 tamamlanırken <div> elementinin 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 uygulayan element */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Kişisel olarak deneyin

Aşağıdaki örnek, animasyonun %25, %50 ve %100 tamamlanırken 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 uygulayan element */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Kişisel olarak deneyin

Gecikmeli animasyon

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

Aşağıdaki örnek, animasyonun başlamadan önce 2 saniye gecikmeli çalıştığını gösterir:

örnek

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

Kişisel olarak deneyin

Negatif değerler de izin verilir. Negatif bir değer kullanılırsa, animasyon N saniye gibi zaten oynadığı gibi başlayacaktır.

Aşağıdaki örnekte, animasyon, 2 saniye gibi zaten oynadığı gibi başlayacaktır:

örnek

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

Kişisel olarak deneyin

Animasyonun kaç kez çalışması gerektiğini ayarlama

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

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

örnek

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

Kişisel olarak deneyin

Aşağıdaki örnek, "infinite" değeri kullanarak animasyonun sonsuza kadar süreceğini gösterir:

örnek

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

Kişisel olarak deneyin

Ters veya alternatif animasyon çalıştırma

animation-direction Bu özellik, animasyonun öne, geriye mi 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).
  • alternate - Animasyon önce öne, ardından geriye oynar
  • alternate-reverse - Animasyon önce geriye, ardından öne oynar

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

örnek

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

Kişisel olarak deneyin

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

örnek

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

Kişisel olarak deneyin

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

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

Kişisel olarak deneyin

Animasyonun hız eğrisini belirtir

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

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

  • ease - Yavaş başlayan, ardından hızlanarak, ardından yavaşlayan 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) - Üç kare fonksiyonunda tanımladığınız değerleri çalıştırın

Aşağıdaki örnekler, kullanılabilecek 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;}

Kişisel olarak deneyin

Animasyonun doldurma modunu belirtir

CSS animasyonları, ilk anahtar kareden önce veya en son anahtar kareden sonra elementi etkilemez.animation-fill-mode özellik bu davranışı aşabilir.

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

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

  • none - Varsayılan değer. Animasyon, elemente herhangi bir stil uygulamadan önce veya sonra çalışmaz.
  • forwards - Element, en son anahtar kareden alınan stilleri korur (animation-direction ve animation-iteration-count'a bağlıdır).
  • backwards - Element, ilk anahtar kareden alınan stilleri alır (animation-direction'a bağlıdır) ve animasyon gecikme süresi boyunca bu değeri korur.
  • both - Animasyon hem ileri hem de geri kurallarını takip eder, bu da animasyon özelliklerini iki yönde genişletir.

Örnek, <div> elementinin animasyonun sonunda en son anahtar karedeki stillerini korumak için kullanılır:

örnek

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

Kişisel olarak deneyin

aşağıdaki örnekte <div> elementi, animasyonun başlamadan önce (animasyon gecikmesi sırasında) ilk anahtar karede belirtilen 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;
}

Kişisel olarak deneyin

aşağıdaki örnekte <div> elementi, animasyonun başlamadan önce ilk anahtar karede belirtilen tarz değerini alır ve animasyonun sonunda son anahtar karedeki 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;
}

Kişisel olarak deneyin

animasyon kısa isim ö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;
}

Kişisel olarak deneyin

kısaltılmış animation özellikler de yukarıdaki örnekteki animasyon etkisini elde edebilir:

örnek

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

Kişisel olarak deneyin

CSS Animasyon Özellikleri

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

özellik tanımlama
@keyframes animasyon modunu belirtir.
animation tüm animasyon özelliklerinin kısa isim özelliğini ayarlar.
animation-delay animasyonun başlama gecikmesini belirtir.
animation-direction animasyonun ileriye doğru oynar, geriye doğru oynar mı yoksa değişken bir şekilde mi oynayacağını belirler.
animation-duration animasyonun bir dönemi tamamlamak için harcanması gereken süreyi belirtir.
animation-fill-mode elementin animasyonu oynamadığında (başlangıçta, bitimde veya her ikisi birlikte) tarzını belirtir.
animation-iteration-count animasyonun oynanması gereken seans sayısını belirtir.
animation-name tanımlar @keyframes animasyonunun adı.
animation-play-state Animasyonun çalışıp çalışmayacağını belirler.
animation-timing-function Animasyonun hız çizgisini belirler.