Css3’ün çıktığından hemen hemen herkesin haberi var. Css3 WebKit ve Webkit destekli tarayıcılar üzerinde çalışan web teknolojisidir. Uzun süre boyunca Internet Explorer Css3’ü kabul etmemekte dirense de artık Internet Explorer’in son sürümlerinde de  yavaş yavaş bütün özellikler destkeleniyor. Birçok webtasarımcısının en çok dert edindiği konulardan biriydi IE’nin bu inadı.

jQuery’yi de az çok bilirsiniz. Css3 sayesinde jQuery ile kullanabileceğiniz animasyonların neredeyse tamamını (hatta daha fazlasını) çok kolay bir şekilde JavaScript bilgisi olmadan kullanabiliyorsunuz. Sıfırdan başlayıp Css3 animasyonları kullanabilmek o kadar kolay değil ve tahmin ettiğiniz kadar zor da değil. Css3′ün nasıl çalıştığını bilmeniz yeterli.

jQuery yada JavaScript’te  görmüşsünüzdür belki, animasyon eklenecek olan Css  sınıfı JavaScript ve jQueyr kodlar içinde bir şekilde ilişkilendirilmesi gerek. Css3’te de  aynı durum söz konusu. Animasyonunuza bir sınıf belirledikten sonra gerekli  değerleri belirleyip herhangi bir  element ile ilişkilendirmeniz gerekiyor.

Mesela aşağıdaki gibi  bir Css kod hazırladınız.

.cssCercevemiz {
 widht:50px;
 height:50px;
 background-color:#fff;
}

Mouse bu çerçevenin üzerine geldiği an değişik animasyonlar gerçekleşmesini istiyorsanız eğer öncelikle Css3’ten yararlanarak bir animasyon hazırlamanız gerekiyor.

Hiçbir özelliği olmayan boş bir animasyon kodu:

@keyframes animasyonum { 
from {

}

Yukardaki kodda @keyframes animasyonum kısmında kullanacağınız  animasyonun ismini belirledik. Farzedelim ki bu animasyonumuz boş değil ve daha önceden hazırladığımız .cssCercevemiz adlı div’e  mouse üzerine gelince animasyonum adlı animasyonu uygulamak istiyoruz. Bunun için  de hover  kullanıyoruz.

Örnek hover :

.cssCercevemiz:hover {
 animation-name: animasyonum;
}

Bu şekilde yaptığınız zaman mouse çerçevenin üzerine geldiği an animasyonumuz devreye girecektir.

Şimdi diyeceksiniz arkadaş madem anlatıyorsun hazır animasyon da ekleseydin. Bunları anlatmamın sebebi burada her türlü animasyonun bulunduğu bir paketi sizlerle paylaşmaktı. Aşağıda download butonundan indireceğiniz pakette web tasarım çalışmalarınızda kullanabileceğiniz  her türlü animasyon bulunuyor. Yani herhangi bir animasyon hazırlamak için uğraşmanıza gerek yok. Sağolsun Daniel Eden sizler için bütün Css3 animasyonları hazırlayıp tek pakette birleştirmiş ve ücretsiz olarak dağıtıyor.

Bu paketteki animasyonlar ile animasyonlu mükemmel resim galerileri, menüler, çerçeveler, butonlar, yazılar vs.  oluşturabilirsiniz. Sadece başlangıç seviyesi olanlar için anlatma ihtiyacı duydum. Tahmin ettiğiniz kadar da zor değil aslında. Bu paketteki animasyon örnekleri ile profesyonel çalışmalar hazırlamak oldukça kolay olacaktır.