Animation Özellikleri ve Kullanımı

Animation Özellikleri ve Kullanımı

Animasyon özelliğinde süre, gecikme süresi, animasyon tekrarı gibi birden çok özellik mevcut.

animation-name: Kullanmak istediğimiz animasyonun ismi. Bir önceki yazımızda @keyframes ornek-animasyon olarak tanımladığımız ornek-animasyon değerini buraya yazıyoruz.

animation-duration: Animasyonun süresi. Örneğin, 1s (1 saniye), 750ms (750 milisaniye) gibi..

animation-timing-function: Animasyonun hızı.

animation-delay: Gecikme süresi. Örneğin, 2s olarak belirttiğimizde animasyon 2 saniye gecikmeli olarak başlayacaktır.

animation-iteration-count: Animasyon tekrar sayısı. 3 olarak belirttiğimizde animasyon 3 defa çalışacaktır.

animation-direction: Animasyonun yönü. Varsayılan olarak animasyon, baştan sonra doğru çalışacaktır. Örneğin, sondan başa doğru çalışmasını istersek alternate değerini kullanabiliriz.

animation-fill-mode: Animasyon bittikten sonraki süreç. Örneğin backwards parametresini verdiğimizde, animasyon bitiminde, animasyonun ilk karesindeki özellikler uygulanır.

Bir tane de örnek yapalım.

.css-animation-ornegi {
    animation-name: ornek-animasyon;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 3;
    animation-direction: normal;
    animation-fill-mode: none;
}

Eğer birden fazla yerde animasyon kullanacaksak, bu özellikleri tek tek yazmamız gereksiz kod kalabalığına neden olacaktır. Bunun için ise kısa tanımlamayı kullanmak daha kullanışlı olacaktır.

.css-animation-ornegi {
    animation: ornek-animasyon 2s ease 0s 3 normal none;
}

Burada dikkat edilmesi gereken nokta, parametrelerin sıralaması. Verdiğimiz değerler, ilk örnekteki parametreler ile aynı sırada olmalıdır. Yani 1. parametre animation-name, 2. parametre animation-duration, 3. parametre animation-timing-function vs..