HTML5-CSS3 ANİMASYON

Animation: Daha kaliteli animasyonlar yapabilmek için kullanılan CSS3 kodudur. Transform ve Transition ile yaptığımız efektleri daha esnek hale getirmek için animation kullanılır. Animation ile her nesnenin efektini, bu efektlere ait zamanlamayı ve her efekte ait hız biçimlendirmesini daha esnek bir şekilde yapabiliriz.

Transform ve Transition da efektin farklı olduğu kısmı nesneye ait CSS kodunun Hover özelliğinde veriyorduk. Bu da o efektin nesnenin üzerine geldiğimizde çalışmasını sağlıyordu. Animation da ise bu farklılıkları @keyframes özelliğinde vereceğiz böylece daha sayfa yüklenir yüklenmez animasyon çalışmaya başlayacaktır.
Media queries:@mediascreen özelliği sayesinde daha responsive yani ekran özelliklerine göre kendini daha kolay ayarlayabilen tasarımlar yapmak kolaylaşmıştır. Bu özellikle 400px genişliğe sahip ekranda farklı 1024px genişliğe sahip ekranda farklı düzen ve tasarımda şekillendirme sağlanabilmektedir. Hangi özelliklerin hangi ekran boyutunda çıkması gerektiğini bu özellikle tanımlayabilmekteyiz.
aşağıda animasyon örneği görüyorsunuz. Browser sayfanız tam sayfa ise araba, sayfanızı küçültürseniz roketi görürsünüz.

BURADAN KODLARINI İNDİREBİLİRSİNİZ.
Animasyonun_Kodları