HTML ve CSS ile Animasyonlara Giriş | Ders 1

Animasyonlar dozunda olunca sitenize hareket katarlar ve insanlar hareketi sever. Hadi başlayalım.

Öncelikle basit bir css dosyası oluşturmakla başlayalım ve şunları yazalım :

div {
 width: 100px;
 height: 100px;
 background: blue;
}

Peki burda ne yaptık; sitemizdeki tüm divlerin 1oo piksel genişliğinde(width : 100px) ve 100 piksel yüksekliğinde olmasını sağladık(height: 100px) ayrıca arkaplan rengini mavi yaptık(background: blue). Bu bize aşağıdakini verdi:

Tamam bu burada kalsın şimdi şu satırları yazın:

@keyframes renk-degistir {
    from {background-color: blue;}
    to {background-color: yellow;}
}

Tamam bu belki biraz kafa karıştırdı,

merak etme herşeyi anlatıcam sırayla gidelim. Öncelikle @keyframes; bir animasyon ön tanımlayıcıdır. Şuna benzetebilirsin @animasyon zıpla burda zıpla adında bir animasyon tanımladık. Peki ne demek? Açıkçası ben anahtar(key) kareler(frames) olarak çeviriyorum.

from ve to; bunlar animasyonun birer özlliğidir nerden nereye gibi çevirilebilir. Şu demek animasyon mavi olarak başlayıp sarı olarak bitecek tabi renklerle kısıtlı değiliz bir harekette olabilir.

background-color; bu aşina olduğunuz bir kavram olduğu için fazla detaya girmeyeceğim. Kısaca; arkaplan rengi.

Tam olarak ne oldu şimdi; yeni bir animasyon yarattık ve mavi olarak başlayıp sarı olarak bitmesini istedik. Peki bu animasyon oldu mu? Evet, ama tam değil. Şöyle bir animasyon oluşturduk ama bunu ne bir sınıfa atadık ne de zaman belirttik. Başa dönelim ve ilk yazdığımız sınıfa aşağıdakileri ekleyelim:

animation-name: renk-degistir;
animation-duration: 4s;

İşte bu kadar! Sınıfımıza renk-degistir animasyonunu tanımladık(animation-name: renk-degistir) ve animasyonu 4 saniyede bitirmesini istedik.  Hadi deneyelim:

Şimdilik bu kadar. Sürç-i lisan ettiysem affola, sonraki derslerde görüşmek üzere.