Burada iki parametre var:
moveAndChangeColor: Bu, daha önce tanımladığımız keyframe animasyonunun adıdır. Bu animasyon, kutunun hareketini ve renk değişimini yönetir.
5s: Bu, animasyonun süresidir. 5s (5 saniye) animasyonun tamamlanma süresini belirtir. Yani animasyon, 5 saniye süresince çalışır.
infinite: Bu, animasyonun kaç kez tekrarlanacağına karar verir. infinite değeri, animasyonun sonsuz kez tekrar etmesini sağlar. Yani animasyon başladığında durmaz, sürekli olarak baştan sona doğru devam eder.
animation Özelliğinin Diğer Kullanım Şekilleri
CSS'deki animation özelliği şu şekilde farklı parametrelerle de kullanılabilir:
1. Animation Duration (Süre)
Animasyonun ne kadar sürede tamamlanacağını belirler. Süre, saniye (s) ya da milisaniye (ms) cinsinden belirtilebilir.
animation: moveAndChangeColor 3s; /* Animasyon 3 saniye sürecek */
2. Animation Timing Function (Zamanlayıcı Fonksiyonu)
Animasyonun hızının zaman içinde nasıl değişeceğini belirtir. Örneğin:
ease (varsayılan değer): Animasyon yavaş başlar, hızlanır ve sonunda yavaşlar.
linear: Animasyon sabit hızda gerçekleşir.
ease-in: Animasyon yavaş başlar, hızlanır.
ease-out: Animasyon hızla başlar, yavaşlar.
ease-in-out: Animasyon yavaş başlar, hızlanır, sonra tekrar yavaşlar.
Örnek:
animation: moveAndChangeColor 5s ease-in-out; /* Animasyon yavaş başlar, hızlanır, sonra tekrar yavaşlar */
3. Animation Iteration Count (Tekrarlama Sayısı)
Animasyonun kaç kez tekrar edeceğini belirtir. Bunu sayı ile belirleyebilirsiniz. infinite dışında, örneğin 3 değeri ile animasyon 3 kez tekrarlanır.
Örnek:
animation: moveAndChangeColor 5s 3; /* Animasyon 3 kez tekrarlanacak */
4. Animation Direction (Yön)
Animasyonun yönünü belirler:
normal: Animasyon belirtilen yönde (başlangıçtan bitişe doğru) çalışır.
reverse: Animasyon tersten (bitişten başlangıca doğru) çalışır.
alternate: Animasyon ileriye doğru çalışır, sonra geriye doğru çalışır.
alternate-reverse: Animasyon geriye doğru çalışır, sonra ileriye doğru çalışır.
Örnek:
animation: moveAndChangeColor 5s alternate; /* Animasyon ileri ve geri tekrarlanacak */
5. Animation Delay (Gecikme)
Animasyonun başlamadan önce ne kadar süre bekleyeceğini belirtir. Gecikme de saniye (s) ya da milisaniye (ms) cinsinden verilebilir.
Örnek:
animation: moveAndChangeColor 5s 1s; /* Animasyon 1 saniye gecikmeli başlayacak */
6. Animation Play State (Oynatma Durumu)
Animasyonun başlangıçta durdurulup durdurulmayacağını belirler.
paused: Animasyon başlangıçta duraklatılır.
running: Animasyon hemen başlar (varsayılan değer).
Örnek:
animation: moveAndChangeColor 5s infinite running; /* Animasyon başlatıldığında hemen başlar */
Birleştirilmiş Kullanım
Tüm parametreleri bir arada kullanarak daha karmaşık bir animasyon oluşturabilirsiniz. Örneğin:
animation: moveAndChangeColor 4s ease-in-out 2s 3 normal;
Bu örnek, animasyonu şu şekilde çalıştırır:
moveAndChangeColor: Animasyonun adı.
4s: Animasyon 4 saniye sürecek.
ease-in-out: Animasyonun hızlanıp yavaşlayacağı bir zamanlayıcı fonksiyonu.
2s: Animasyon başlamadan önce 2 saniye bekleyecek.
3: Animasyon 3 kez tekrarlanacak.
normal: Animasyon, başlangıçtan bitişe doğru gerçekleşecek.
Sonuç
CSS'deki animation özelliği ile çok esnek ve güçlü animasyonlar oluşturabilirsiniz. Animasyonun süresi, yönü, hız değişimi, tekrarlama sayısı ve gecikme gibi çeşitli parametrelerle animasyonu özelleştirebilirsiniz. Bu parametreleri doğru bir şekilde kullanarak web tasarımınızda görsel olarak etkileyici ve dinamik öğeler oluşturabilirsiniz.