4 hizmet ayı
| @keyframes | Animasyonlar ile ilgili Css kodlarımızı yazmak için kullanılır. @keyframes özelliği içerisindeki from ve to blokları içerisine kodlarımızı yazabiliriz. Animasyon, belirtilen sürede from içerisindeki Css kodlarından başlar ve kademeli olarak to içerisindeki Css kodlarına dönüşünceye kadar devam eder. |
| animation | Tüm animasyon özelliklerini toplu olarak tek özellikle belirtmek için kullanılır. Bir animasyon örneğini hem uzun hem de kısa şekliyle yazacak olursak: ** Ayrı ayrı yazarak animasyon örneği ** animation-name: example; animation-duration: 3s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; ** Tek satırda yazarak animasyon örneği ** animation: example3s linear 2s infinite alternate; |
| animation-delay | Animasyonu belirli bir süre sonra başlatmak için kullanılır. |
| animation-direction | Animasyonun yönünü belirtmek için kullanılır. 4 değer alabilir. Bunlar:
|
| animation-duration | Animasyonun ne kadar sürede tamamlanacağını belirtmek için kullanılır. Varsayılan değeri 0’dır. |
| animation-fill-mode | Animasyonun bittikten sonraki durumunu belirtmek için kullanılır. animation-fill-mode özelliğine şu değerleri verebiliyoruz:
|
| animation-iteration-count | Animasyonun kaç defa tekrar edeceğini belirtmek için kullanılır. Eğer animasyonun sonsuz döngüye girmesini yani sürekli tekrar etmesini istiyorsak infinite değerini vermemiz gerekiyor. |
| animation-name | Animasyonun hangi etikete uygulanmasını istiyorsak, o etikete animation-name özelliği ile yazmış olduğumuz animasyonun adı verilir. |
| animation-play-state | paused değeri vererek animasyonları durdurmak için kullanılır. animation-play-state özelliğine şu değerleri verebiliyoruz:
|
| animation-timing-function | Animasyonun gerçekleşme biçimini belirtmek için kullanılır. Örneğin gerçekleşecek animasyon, hızlı bir şekilde başlayıp sonlara doğru yavaşlayabilir. Yavaş bir şekilde başlayıp sonlara doğru hızlanabilir veya sabit bir hızda gerçekleşebilir. animation-timing-function özelliğine şu değerleri verebiliyoruz:
|