CSS Animasyon Ekleme Nasıl Yapılır?

CSS animasyon özelliği; javascript veya flash olmadan bize animasyon yapma imkanı sağlamaktadır.

Animasyon tanımlarında tanımlamalar ve zamanlama önceden yapılır, sonra ise uygulanacak elemana tanımlanır.

Anahtar Kare (Keyframes)

CSS animasyonu bir süreç olarak kabul edersek, anahtar kare (keyframe) bize geçişin başlangıç ve bitişi arasındaki durumları tanımlamamız için olanak sağlar.

@keyframes Kuralı

CSS anahtar kare (keyframe) tanımı bir @kuralı olarak tanımlanır. Normal CSS tanımları içerir, ancak farklı olarak tanımlayıcı bir isim ve her kareye bir tanım yapmamızı sağlayan bir yapıya sahiptir.

@keyframes animasyom_ismi
{
  keyframe
  {
    property: value;
   }
}

animasyom_ismi tekil bir tanımıdır. Daha sonra elemente animasyon uygulamak istediğimizde kullanılır.

@keyframes sagaGiden
{
  0%
  {
    left: 0;
  }
  50%
  {
    left: 150px;
  }
  100%
  {
    left: 300px;
  }
}

Yukarıdaki kod ile ‘sagaGiden’ animasyonumuza üç adet anahtar kare (keyframe) oluşturmuş olduk. Animasyonumuzun 0%, 50% ve 100%’ün de anahtar kare (frame) meydana getirmiş olduk. Her karede (frame) elemana istediğimiz animasyonu uygulayabiliyoruz.

Ayrıca (0% – 100%) kullanımı yerine (from – to) kullanımı da vardır.

Animasyon Özellikleri

Anahtar kare (keyframe) tanımından sonra animasyon özellikleri tanımlarına geliyor sıra. Bu özellik tanımları CSS tanımlarına benzer bir yapısı vardır. Aşağıda bunları tek tek inceleyelim.

• animation-name
• animation-duration
• animation-timing-function
• animation-iteration-count
• animation-direction
• animation-delay
• animation-play-state
• animation-fill-mode
• animation

Animasyonun Adı (animation-name)

Bir elemana animasyon uygulayacağımız zaman ilk olarak bir isim tanımlamamız gerekiyor.

.deneme
{
  animation-name: ornek;
}

Tek değer alır ve tanımlanan değer yukarıda belirttiğimiz gibi anahtar kareye parametre olarak eklenir. Bunun dışında none değeri de alır. Animasyon ismini tırnak içinde yazınca Firefox’da çalışmıyor.

Animasyonun Zamanı (animation-duration)

Animasyonun ne kadar süreceğini belirtmek için bu özelliği kullanırız.

.deneme
{
  animation-name: ornek;
  animation-duration: 3s;
}

Animasyonun 3 saniye devam edeceğini gösterir. Zaman değerleri alır. ms, s ve 0 değerleri alır.

Zamanlama Fonksiyonu (animation-timing-function)

div
{
  animation-timing-function: keyword
}

Aldığı değerler ease, linear, ease-in, ease-out, ve ease-in-out

.deneme
{
  animation-name: ornek;
  animation-duration: 3s;
  animation-timing-function:ease;
}

Animasyonun esnek bir şekilde meydana gelmesini sağlar.

Animasyonun Tekrar Sayısı (animation-iteration-count)

Bu tanım animasyonun kaç kere tekrarlanacağını belirler.

.deneme
{
  animation-name: ornek;
  animation-duration: 3s;
  animation-timing-function:ease;
  animation-iteration-count: 3;
}

animation-iteration-count tanımı tüm pozitif rakamları alabilir. Animasyonun daimi olarak devam etmesini istiyorsak infinite değerini atamalıyız. Başlangıç değeri 1’dir.

Animasyon Yönü (animation-direction)

Animasyonlar normalde başlangıçtan sona doğru hareket eder. Bazen ise bu akışı tersine çevirmek isteriz. Animasyonun yönünü belirleye biliyoruz, ileri doğru veya tersine aksın diyebiliyoruz.

Başlangıç değer normal olarak tanımlıdır. Aldığı değerler

normal Animasyon her çalışmadan baştan sona doğru çalışır. Yani animasyonun her döngüsünde baştan başlayacak. Bu özelliğin başlangıç değerdir.

alternate Animasyon sondan başa hareket eder. Animasyon terse oynarken her adımı geri doğru hareket eder. animation-timing-function foksiyonuda tersine döner, yani ease-in tanımlı ise bu tanım yapıldığında animasyon ease-out şeklinde oynayacaktır. Animasyon tekrar sayısı tanımlı ise, her tek ve çift sayı için bu durum tekrar edecektir.

reverse Animasyon her döngüde geriye doğru oynar. Animasyonun her döngüsünde sondan başa hareket eder.

alternate-reverse İlk döngüde sondan başa, sonra baştan sona doğru hareket eder. Animasyon tekrar sayısı tanımlı ise, her tek ve çift sayı için bu durum tekrar edecektir.

Örnek;

.deneme
{
  animation-name: ornek;
  animation-duration: 3s;
  animation-timing-function:ease;
  animation-iteration-count: 3;
  animation-direction: alternate-reverse;
}

Animasyonu tersine çevirecektir. Metin sağdan sola değil, soldan sağa doğru gelecektir.

Animasyona Ara Verme (animation-delay)

animation-delay tanımı animasyonun başlamadan önce belli bir süre bekletmemizi sağlar.

.deneme
{
  animation-name: ornek;
  animation-duration: 3s;
  animation-timing-function:ease;
  animation-iteration-count: 3;
  animation-direction:reverse;
  animation-delay: 4s;
}

Tanımı ile animasyon tetiklenmesinden itibaren 4 saniye sonra başlayacaktır. Bu tanım pozitif ve negatif rakam alabilir. Pozitif değerler animasyonu bekletirken, negatif değerler atandığında animasyon hemen başlayacak ve belirlenen saniyeden sonra görünmeye başlayacaktır.

Animasyonu Durdurma (animation-play-state)

Diğer bir animasyon özelliğide animation-play-state özelliğidir, animasyon yürütme kontrolünü yapar. İki değer alır; çalıştır(running) veya durdur(paused). Bir animasyonu durdurmak için

animation-play-state: paused;

tanımını yapmamız yeterlidir. Elemanın üzerine geldiğimizde animasyonun durdurmak için

.deneme:hover
{
  animation-play-state: paused;
}

Tanımını eklememiz yeterli olacaktır. Bu özelliğe javascript ile erişerek daha dinamik örnekler oluşturabiliriz.

animation-fill-mode

Bu özellik animasyonun bitiminden sonra veya animation-duration ile belirlenen zaman sırasında nasıl davranacağını belirler. animation-fill-mode aşağıdaki değerleri alır.

none: başlangıç değeridir. Başlangıç değeri olarak kullanılan bu değer ile animasyon bittikten sonra geri dönmesini sağlar ve kendi tanımlarını alır. Animasyonun başındaki animation-duration ile tanımlanan zaman sırasında herhangi bir stil uygulanmaz.

forwards: animasyon bittikten sonra, son anahtar karede animasyonda tanımlanan özellik korunur. none değerinde animasyonun başına dönerken, forwards tanımında son kare özellikleri korunarak kalır.

backwards: tanımlanan animasyon durdurma (animation-delay) zamanında, uygulanan animasyonun ilk karesindeki değer tanımlanır. none değerinde durdurma zamanında herhangi bir tanım almazken, backwards tanımında tanımlana animasyonun ilk kare özelliklerini alır.

both elemente forwards ve backwards aynı anda uygulanır. Hem animasyonun durdurma zamanında ilk kare özelliklerini alır, hemde son kare değerleri elemanda tanımlı kalır.

animation-fill-mode özelliği animasyonun dışında hedef elemana uygulanacak stillerin nasıl uygulanacağını tanımlar.

Bu özellik sayesinde bazı kesilme ve garip atlamaları engelleyebiliriz. animation-fill-mode özelliğini kullanarak fazladan kod yazmadan bu tip sorunları engelleyebilirsiniz.

CSS Animasyon Kısayolu (animation)

Yukarıda css animasyon özelliklerini tanımladık. Bu tanımları önek ile birlikte yazdığımızda bir sayfaya yakın bir kod yığını ortaya çıkmaktadır. Bu kod yığınını azaltmak için ve daha kısa kod yazmak için animation tanımı ile yukarıdaki tanımları azaltabiliriz. Bu tanımlama ile animation-name, animation-duration, animation-timing-function, animation-iteration-count, animation-direction, animation-delay ve animation-fill-mode tanımlarını tek bir tanım içine almış oluruz.

Örneğimiz göz önüne alırsak;

.deneme
{
  animation-name: ornek;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 2;
  animation-direction: alternate;
  animation-delay: 5s;
  animation-fill-mode: forwards;
}

Tanımı yerine

.deneme
{
  animation: ornek 2s ease-in-out 2 alternate 5s forwards;
}

7 satır kod tek satıra indi. Yukarıdaki sıra önemlidir; name, duration, timing function, count, direction, delay, and fill- mode. Her tanım birbirinden boşluk ile ayrılır. Sadece adı ve süresi yazılması gerekmektedir, diğer değerler isteğe bağlıdır.

Birden fazla animasyon tanımı da yapabiliriz. Bunu için tanımı virgül ile ayırırız.

.deneme
{
  animation-name: ornek1, ornek2;
  animation-duration: .8s, 8s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: linear;
}

yerine

.deneme
{
  animation: ornek1 .8s 4 both linear alternate-reverse, ornek2 8s 4 both linear alternate-reverse;
}

CSS animasyon özelliği konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.

https://yazilimdelisi.com/category/web-gelistirme/css/

Sosyal Medya Hesaplarımız

Son Eklenen Yazılar