CSS3 @keyframes ile animasyonlu nesneler oluşturma

09 Aralık 2012 tarihinde yayınlandı

CSS3 ile beraber duyurulan ve kullanılmaya başlayan önemli yeniliklerden biri keyframes. Keyframes ile geçişleri oldukça detaylı ve göze hitap eden animasyonlar oluşturabilirsiniz. Kodrella anasayfada ki yeni konuların üzerine mouse ile geldiğinizde başlık/içeriğin bir renkten, sırasıyla diğer renklere geçişini de keyframes ile yaptım.

@keyframes ile bir nesneyi %’de bazında stillendirebiliyorsunuz. Şöyle ki misal, linkin üzerine gelindiğinde ne olacağını, yüzdelik dilimler halinde tanımlayabiliyorsunuz. %10′unda bu renk, %20sinde bu renk, %50 sinde bu, bitişte de bu olsun diyebiliyorsunuz. Veya,  div’i bir yerden bir yere taşımak istiyorsunuz, bu taşıma işlemini de css3 keyframes ile daha güzel bir görünümle sunabilirsiniz. Sadece renk ve margin değil tabii css’de yazabildiğiniz herşeyi keyframes ile bu yüzdelik dilimlere aktarabilirsiniz.

Öncelikle @keyframes’in basitçe bir kullanımına bakalım;

keyframes’in temel 2 komutu var. Bunlar from ve to. From başlangıçta ne olacağı, to bitişte ne olacağını belirtir. Bu komutları kullanmak zorunda değilsiniz, yine de bilmenizde fayda var.

@keyframes kodRella
{
from {color:#222;}
to {color:#333;}
}

(daha fazla…)