CSS ile Animasyon Yapımı
CSS gelişimi, Javascript ve Flash gibi scriptlere olan bağlılığı büyük oranda azalttı. Script ve Flash programlarının dosyalarımıza yüklediği ekstra yükün azalmasını sağladı. Bu gelişimlerden biri animasyonlardır. CSS stillerini kullanarak animasyon oluşturabiliriz.
Animasyon uygulanacak seçici bloğuna animasyonun özelliklerini, @keyframes bloğuna yaptırmak istediğimiz işlemlerin kodlamasını yapıyoruz.
.ay{
animation-name: ayHareket;
}
@keyframes ayHareket{
from{left: 0;}
to{left: 10px;}
}
şeklinde blokları oluşturuyoruz. Uyumluluk problemleri açısından, -webkit- etiketlerini kullanmalıyız.
animation-name: ayHareket; //En önemli değerdir. Animasyonun kaç saat sonra çalışacağı, kaç kere döneceği gibi işlemler varsayılan değere sahiptir. Ancak buradaki değeri belirlememiz gerekiyor. Burada vereceğimiz ismi, anahtar kelime olarak kullanacağız.
animation-duration: 15; //Animasyonun süresidir.
animation-delay: 15; //Site yüklendikten sonra, animasyonun başlangıç süresidir.
animation-iteration-count: 3; //Animasyonun tekrar sayısıdır. infinite değerini verirsek sonsuz döngüye girer. Varsayılan değer 1'dir.
animation-direction: alternate; //Animasyonun yönünü belirler. reverse değeri ile animasyonu tersine doğru çalıştırabiliriz.
animation-timing-function: ease-in; //Animasyonumuzun başlangıcında, başlangıç-bitişlerde, ortalarında alacağı hızımızı belirler. ease, ease-in, ease-out, ease-in-out, linear değerlerini verebiliriz.
Animasyon uygulanacak seçici bloğuna animasyonun özelliklerini, @keyframes bloğuna yaptırmak istediğimiz işlemlerin kodlamasını yapıyoruz.
.ay{
animation-name: ayHareket;
}
@keyframes ayHareket{
from{left: 0;}
to{left: 10px;}
}
şeklinde blokları oluşturuyoruz. Uyumluluk problemleri açısından, -webkit- etiketlerini kullanmalıyız.
animation-name: ayHareket; //En önemli değerdir. Animasyonun kaç saat sonra çalışacağı, kaç kere döneceği gibi işlemler varsayılan değere sahiptir. Ancak buradaki değeri belirlememiz gerekiyor. Burada vereceğimiz ismi, anahtar kelime olarak kullanacağız.
animation-duration: 15; //Animasyonun süresidir.
animation-delay: 15; //Site yüklendikten sonra, animasyonun başlangıç süresidir.
animation-iteration-count: 3; //Animasyonun tekrar sayısıdır. infinite değerini verirsek sonsuz döngüye girer. Varsayılan değer 1'dir.
animation-direction: alternate; //Animasyonun yönünü belirler. reverse değeri ile animasyonu tersine doğru çalıştırabiliriz.
animation-timing-function: ease-in; //Animasyonumuzun başlangıcında, başlangıç-bitişlerde, ortalarında alacağı hızımızı belirler. ease, ease-in, ease-out, ease-in-out, linear değerlerini verebiliriz.
Kodların uzun uzun yazdığımız gibi, aynı zamanda tek satırda da yazabiliriz;
-webkit-animation: ayHareket 15s ease-in 2s infinite alternate;
animation: ayHareket 15s ease-in 2s infinite alternate;
Tabi bu isteğe bağlıdır. Her iki şekilde kodlar çalışacaktır. Benim nacizane tavsiyem, kodların kısa yazılışı ile kullanılmasıdır.
Yorumlar
Yorum Gönder