Merhaba, CSS Geçişleri ile bir başlangıç durumundan bitiş durumuna nasıl geçileceğini tanımlamayı öğrendik. CSS Geçişleri de belirli bir tür animasyondur:

  • Sadece 2 durumu vardır: başlangıç ve bitiş.
  • Geçiş animasyonu tekrarlı değildir. Durum değiştirildiğinde yalnızca 1 kez gerçekleşir.
  • Başlangıç ve bitiş arasında gerçekleşecek olaylar yalnızca zamanlama fonksiyonu ile sınırlıdır.

Eğer bunlardan farklı olarak şu durumları da kontrol etmek isteseydik:

  • Başlangıç ve bitiş arasındaki gerçekleşecek eylemleri kontrol etmek ?
  • Tekrarlayan bir animasyon oluşturmak ?
  • Aynı öğeye farklı animasyonlar tanımlamak ?
  • Belirli bir özelliği animasyonun sadece bir bölümünde kullanmak ?
  • Farklı öğeler için farklı zamanlama fonksiyonları kullanmak ?

CSS Animasyonları bunların hepsini mümkün kılar.

CSS animasyonları, farklı sahneler (keyframes) için aktörlerinize (HTML öğeleri) talimatlar (CSS kuralları) veren yönetmen olduğunuz mini filmler gibidir.

Animasyon özellikleri

Aynı transition‘da olduğu gibi animationda belli özellikler içerir.

  • name: animasyonun ismini ifade eder.
  • duration: geçişin ne kadar süreceğini ifade eder.
  • timing-function: ara durumların nasıl hesaplanacağını ifade eder.
  • delay: animasyonun ne kadar süre sonra başlayacağını ifade eder.
  • iteration-count: animasyonun kaç kez gerçekleştirileceğini ifade eder.
  • direction: animasyonun ters çevrilmesi gerekip gerekmediğini ifade eder.
  • fill-mode: animasyon başlamadan önce ve bittikten sonra hangi stillerin uygulanacağını ifade eder.
<a class="yukleniyor">Yükleniyor</a>

HTML içerisinde bir <a> etiketi oluşturduk ve bunu CSS ile bir düğme yapıp animasyon kazandıracağız:

.yukleniyor{ 
    background: lightslategrey;
    border-radius: 2px;
    display: inline-block;
    color: white;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    padding: 1em 2em 1.1em;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: top;
    animation: sicrama 0.5s cubic-bezier(0.1,0.25,0.1,1) 0s infinite alternate both;
}

@keyframes sicrama{
  0%  { bottom: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5);}
  100%{ bottom: 50px; box-shadow: 0 50px 50px rgba(0,0,0,0.1);}
}

Görünümü:

Öncelikle @keyframeskullanarak sicrama adında sıçrama animasyonu hazırlıyoruz. Sonra da bu animasyonu uygulamak istediğimiz düğmenin class’ı olan yukleniyor classımızda tanımlıyoruz. animationöğemizde animasyonun nasıl kullanılacağını belirtiyoruz. İncelememiz gereken bu öğenin içeriği ve oluşturduğumuz sicrama animasyonunun ilk an ve son an halleridir.

Burada sadece animationöğesini kullanıp aşağıdaki ayarları dahil ettik:

  • name: sicrama (keyframe ismine karşılık gelecek şekilde)
  • duration: 0.5s (yarım saniye)
  • timing-function: cubic-bezier(0.1,0.25,0.1,1) (Detaylı Bilgi)
  • delay: 0s (bekleme süresi yok)
  • iteration-count: infinite (süresiz oynuyor)
  • direction: alternate (ileri geri gider)
  • fill-mode: both

@keyframes

Keyframe veya anahtar kareler animasyonun aşamalarını yüzdelik dilimler ile tarif eder.

  • 0%animasyonun ilk aşamasını gösterir.
  • 50%animasyonun yarısındaki halini gösterir.
  • 100%animasyonun son aşamasını gösterir.

Dilediğimiz kadar bu yüzdelik durumları artırarak, hangi aşamada hangi durumda olması gerektiğini tarif ederek animasyonu detaylandırmak mümkün.

Her keyframe CSS kurallarından oluşur, yani her zamanki gibi CSS özelliklerini kullanabiliriz.

Bir başka örnek:

<p>OKT</p>

CSS:

@keyframes etrafindadon {
  0%  { left: 0; top: 0;}
  25% { left: 240px; top: 0;}
  50% { left: 240px; top: 140px;}
  75% { left: 0; top: 140px;}
  100%{ left: 0; top: 0;}
}
p{
    background: darkblue;
    color: white;
    height: 60px;
    line-height: 60px;
    margin: 0;
    position: absolute;
    text-align: center;
    width: 60px;
    animation: etrafindadon 4s linear infinite;
}

Görünümü:

Burada 0% ve 100% değerlerini aynı yaptık. Bu da animasyonumuzun sorunsuz bir şekilde tekrarlı hale gelmesini sağladı. Çünkü yineleme sayısı sonsuz (infinite) olarak ayarlandığından, animasyon% 0’dan % 100’e ve ardından hemen ve sürekli olarak % 0’a geri döner.

Şimdi tek tek animasyon öğelerini inceleyelim:

animation-name

Animasyon ismini iki kere kullanıyoruz.

  • @keyframes kullanarak animasyonu yazarken
  • animation-name özelliğini kullanarak animasyonu kullanırken
@keyframes neyazarsaniz{
  /* ... */
}

.secici{ animation-name: neyazarsaniz;}

Aynı CSS class isimlerinde olduğu gibi animasyon isimleri:

  • harflerden (a-z / Türkçe karakter içermez)
  • rakamlardan (0-9)
  • altçizgilerden (_)
  • tirelerden (-) oluşur.

Rakamla veya iki çizgi ile başlayamaz.

animation-duration

Aynı transition duration özelliği gibi saniye (1s) veya milisaniye (100ms) olarak tanımlanabilir.

.secici{ animation-duration: 0.5s;}

Varsayılan değeri 0s olarak tanımlanmıştır bu da animasyon olmadığını ifade eder.

animation-timing-function

Aynı transition timing function gibi lienar, ease-out gibi kelimeler ile veya cubic bezier gibi özel tanımlı fonksiyonlar kullanılabilir.

.secici{ animation-timing-function: ease-in-out;}

Varsayılan değeri easeolarak tanımlanmıştır.

Gelişmiş animasyonlar oluşturmak için Bounce.js inceleyebilirsiniz.

animation-delay

Yine transition delay özelliği gibidir. Bekleme süresi saniyeler veya milisaniyeler ile tanımlanabilir. Varsayılanı 0s olarak tanımlanmıştır yani belirtilmediği sürece bekleme olmaz.

Birden çok animasyonu sırayla tetiklerken işe yarar.

.a,.b,.c{ animation: sicrama 1s;}
.b{ animation-delay: 0.25s;}
.c{ animation-delay: 0.5s;}

animation-iteration-count

Varsayılan olarak, animasyonlar yalnızca bir kez oynatılır (1 değeri). Ancak burada 3 tür değer ayarlayabilirsiniz:

  • 2 veya 3 gibi tamsayılar
  • animasyonun yalnızca yarısını oynatacak 0,5 gibi ondalıklı sayılar
  • animasyonu süresiz olarak tekrarlayacak infinite anahtar kelimesi

animation-direction

Animasyonun yönü, keyframelerin hangi sırada okunduğunu tanımlar.

  • normal: 0%’da başlar, 100%’de biter, tekrar 0%’da başlar
  • reverse: 100%’de başlar, 0%’da biter, tekrar 100%’de başlar
  • alternate: 0%’da başlar, 100%’e gider, 0%’a gider
  • alternate-reverse: 100%’de başlar, 0%’a gider, 100%’e gider

animation-fill-mode

Bir animasyonun doldurma modu, animasyon başlamadan önce ve bittikten sonra ne olacağını tanımlar.

Keyframeleri tanımladığınızda, animasyonun farklı adımlarında uygulanacak CSS kurallarını tanımlamış olursunuz. Artık bu CSS kuralları, canlandırılan öğelere zaten uygulanmış olan kurallarla çakışabilir.

Doldurma modu, tarayıcıya animasyonun stillerinin animasyonun dışına da uygulanıp uygulanmayacağını söyler.