TEMA WEB TASARIM
0 (555)106 23 45

Css Animasyonlar

ANİMASYONLAR İÇİN KULLANDIĞIMIZ CSS KODLARI VE ANLAMLARI

@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-delayAnimasyonu 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:

  • normal : Varsayılan değerdir.
  • reverse : Animasyonun ters yönde çalışmasını sağlar.
  • alternate : Animasyonun önce normal sonra tam tersi yönde çalışmasını sağlar ve bu şekilde devam eder.
  • alternate-reverse : Animasyonun önce ters yönde sonra normal yönde çalışmasını sağlar ve bu şekilde devam eder.
animation-durationAnimasyonun 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:

  • none : Animasyon bittikten sonra başlangıç değerlerine döner. (Varsayılan değerdir.)
  • forwards : Animasyon bittikten sonraki son durumunda kalır ve o son durumdaki değerler uygulanır.
  • backwards : Animasyon bittikten sonra veya durdurulduğunda, başlangıç özellikleri uygulanır.
  • both : forwards ve backwards değerleri birlikte uygulanır.
animation-iteration-countAnimasyonun 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-nameAnimasyonun 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:

  • running : Varsayılan değerdir ve animasyon normal bir şekilde çalışır.
  • paused : Animasyonu durdurmamızı sağlar.
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:

  • ease : Animasyon, yavaş başlar sonra hızlanır en son tekrar yavaşlar. (Varsayılan değerdir.)
  • linear : Animasyon, baştan sona aynı hızda devam eder.
  • ease-in : Animasyonun yavaş başlamasını sağlar.
  • ease-out : Animasyonun yavaş bitmesini sağlar.
  • ease-in-out : Animasyon, yavaş başlar ve yavaş biter.
Tagged