Animasyonlar

The CSS Podcast - 022: Animation

Bazen arayüzde, tıklandığında ilgili bölümle ilgili yararlı bilgiler sağlayan küçük yardımcılar görürsünüz. Bu tür öğelerde, bilginin mevcut olduğunu ve etkileşime geçilmesi gerektiğini size nazikçe bildirmek için genellikle titreşen bir animasyon bulunur. Bu modülde, CSS'yi kullanarak bu yardımcı araçları ve diğer animasyonları nasıl oluşturacağınız gösterilmektedir.

Animasyon kareleri içeren bir animasyon dizisi ayarlamak için CSS'yi kullanabilirsiniz. Bu sekanslar basit, tek durumlu animasyonlar veya karmaşık, zamana dayalı sekanslar olabilir.

Animasyon karesi nedir?

Çoğu animasyon aracında animasyon kareleri, zaman çizelgesindeki zaman damgalarına animasyon durumları atamak için kullandığınız mekanizmadır.

Örneğin, titreşen "yardımcı" noktanın zaman çizelgesi aşağıda verilmiştir. Animasyon 1 saniye boyunca çalışır ve 2 durumu vardır.

Bu animasyon durumlarının her birinin başlangıç ve bitiş noktası vardır. Bunları zaman çizelgesinde animasyon kareleriyle eşleyebilirsiniz.

@keyframes

Browser Support

• 43
• 12
• 16
• 9

Source

CSS @keyframes, animasyon kareleriyle aynı konsepte dayanır.

İki durum içeren bir örnek:

@keyframes my-animation {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0px);
  }
}

Önemli olan ilk kısım, keyframe kuralının adı olan özel tanımlayıcı (custom-ident)'dır. Bu örnekteki tanımlayıcı my-animation'tır. Özel tanımlayıcı, CSS kodunuzun başka bir yerinde animasyon kareleri kuralına referans vermenize olanak tanıyan bir işlev adı gibi çalışır.

Not: CSS'de çeşitli yerlerde <custom-ident> kullanılır. Bu, öğeler için kendi adınızı belirtmenize olanak tanır. Bu tanımlayıcılar büyük/küçük harfe duyarlıdır ve bazı durumlarda kullanamayacağınız kelimeler vardır. Örneğin, CSS Grid'de satırları adlandırırken span kelimesini kullanamazsınız.

Animasyon kareleri kuralının içinde from ve to, animasyonun başlangıcı ve sonu olan 0% ile 100% değerlerini temsil eden anahtar kelimelerdir. Aynı kuralı aşağıdaki gibi yeniden oluşturabilirsiniz:

@keyframes my-animation {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

Zaman aralığına istediğiniz kadar pozisyon ekleyebilirsiniz. Titreyen yardımcı örneğinde, iki ana kareyle ilişkilendirilen iki durum vardır. Bu, animasyon karesi kuralınızda bu animasyon karelerinin her birinin değişikliklerini temsil eden iki konumunuz olduğu anlamına gelir.

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

animation mülkleri

Browser Support

• 43
• 12
• 16
• 9

Source

@keyframes öğenizi bir CSS kuralında kullanmak için çeşitli animasyon özelliklerini tek tek tanımlayabilir veya animation kısayol özelliğini kullanabilirsiniz.

animation-duration

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element {
    animation-duration: 10s;
}

animation-duration özelliği, @keyframes zaman çizelgesinin zaman değeri olarak ne kadar uzun olması gerektiğini tanımlar. Varsayılan olarak 0 saniyedir. Bu, animasyonun çalışmaya devam ettiği ancak sizin göremeyeceğiniz kadar hızlı olduğu anlamına gelir. Negatif saat değerleri kullanamazsınız.

animation-timing-function

Browser Support

• 43
• 12
• 16
• 9

Source

Animasyonda doğal hareketi yeniden oluşturmak için her noktada animasyon hızını hesaplayan zamanlama işlevlerini kullanabilirsiniz. Hesaplanan değerler genellikle eğri olduğundan animasyon, animation-duration boyunca değişen hızlarda çalışır ve tarayıcı @keyframes'da tanımlananların dışında bir değer hesaplarsa öğenin sıçradığı görülür.

CSS'de hazır ayar olarak kullanılabilen ve animation-timing-function için değer olarak kullanılan çeşitli anahtar kelimeler vardır: linear, ease, ease-in, ease-out, ease-in-out.

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

Easing işlevi değerleri, hız modellemek için kullanılan bir işlev türü olan Bézier eğrisi kullanılarak hesaplandığından eğri gibi görünür. ease gibi zamanlama işlevi anahtar kelimelerinin her biri, önceden tanımlanmış bir Bézier eğrisine referans verir. CSS'de, doğrudan cubic-bezier() işlevini kullanarak bir Bezier eğrisi tanımlayabilirsiniz. Bu işlev dört sayısal değer kabul eder: x1, y1, x2, y2.

.my-element {
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

Bu değerler, eğrinin her bir bölümünü X ve Y eksenleri boyunca gösterir.

Bézier eğrilerini anlamak karmaşıktır. Lea Verou'nun bu oluşturucusu gibi görsel araçlar çok faydalıdır.

steps yumuşatma işlevi

Bazen, eğri yerine aralıklarla hareket ederek animasyonunuz üzerinde daha ayrıntılı kontrol sahibi olmak isteyebilirsiniz. steps() easing işlevi, zaman çizelgesini eşit süre olan belirli aralıklara bölmenize olanak tanır.

.my-element {
    animation-timing-function: steps(10, end);
}

İlk bağımsız değişken, adım sayısıdır. Animasyon karesi sayısı adım sayısıyla aynıysa her animasyon karesi, adımının tam süresi boyunca sırayla oynatılır ve durumlar arasında geçiş yapılmaz. Animasyon karesi sayısı adımlardan azsa tarayıcı, ikinci bağımsız değişkene bağlı olarak animasyon kareleri arasına adımlar ekler.

İkinci bağımsız değişken yöndür. Varsayılan olarak end olarak ayarlanmışsa adımlar, zaman çizelgenizin sonunda sona erer. Bu değer start olarak ayarlanırsa animasyonunuzun ilk adımı başlar başlamaz tamamlanır. Yani animasyon, end değerine göre bir adım daha erken sona erer.

animation-iteration-count

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element {
    animation-iteration-count: 10;
}

animation-iteration-count mülkü, @keyframes zaman çizelgesinin animasyon sırasında kaç kez çalıştırılacağını tanımlar. Varsayılan olarak bu değer 1'dir. Yani animasyon, zaman çizelgenizin sonuna ulaştığında durur. Bu değer negatif sayı olamaz.

Animasyonunuzu döngüye sokmak için iterasyon sayısını infinite olarak ayarlayın. Bu dersin başındaki titreşen animasyon bu şekilde çalışır.

animation-direction

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element {
    animation-direction: reverse;
}

Zaman çizelgesinin animasyon kareleriniz üzerinde hangi yönde ilerleyeceğini animation-direction ile ayarlayabilirsiniz. Bu özellik aşağıdaki değerleri alır:

• normal: Varsayılan değerdir ve ileriyi gösterir.
• reverse: Zaman çizelgeniz geriye doğru oynatılır.
• alternate: Her animasyon iterasyonunda zaman çizelgesi ileri ve geri oynatılır.
• alternate-reverse: alternate ile aynıdır ancak animasyon, zaman çizelgesinin geriye doğru ilerlemesiyle başlar.

animation-delay

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element {
    animation-delay: 5s;
}

animation-delay özelliği, tarayıcının animasyonu başlatmadan önce ne kadar bekleyeceğini tanımlar. animation-duration mülkü gibi bu da bir zaman değeri kabul eder.

animation-duration'ün aksine, animation-delay'ı negatif bir değer olarak tanımlayabilirsiniz. Bu durumda animasyon, zaman çizelgenizdeki ilgili noktada başlar. Örneğin, animasyonunuz 10 saniye uzunluğundaysa ve animation-delay değerini -5s olarak ayarlarsanız animasyon, zaman çizelgenizin ortasından başlar.

animation-play-state

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element:hover {
    animation-play-state: paused;
}

animation-play-state mülkü, animasyonu oynatmanıza ve duraklatmanıza olanak tanır. Varsayılan değer: running. paused olarak ayarlanırsa animasyon duraklatılır.

animation-fill-mode

Browser Support

• 43
• 12
• 16
• 9

Source

animation-fill-mode özelliği, @keyframes zaman çizelgenizdeki hangi değerlerin animasyon başlamadan önce veya bittikten sonra devam edeceğini tanımlar. Varsayılan değer none'tür. Bu, animasyon tamamlandığında zaman çizelgenizdeki değerlerin silineceği anlamına gelir. Diğer seçenekler şunlardır:

• forwards: Animasyon yönüne bağlı olarak son animasyon karesi devam eder.
• backwards: İlk animasyon karesi, animasyon yönüne bağlı olarak devam eder.
• both: Hem ilk hem de son ana kareler korunur.

animation kısayolu

Her bir özelliği ayrı ayrı tanımlamak yerine, animasyon özelliklerini aşağıdaki sırayla tanımlamanıza olanak tanıyan bir animation kısaltması ile tanımlayabilirsiniz:

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

.my-element {
    animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}

Animasyonlarla çalışırken dikkat edilmesi gerekenler

Kullanıcılar, işletim sistemlerini uygulamalar ve web siteleriyle etkileşim kurarken azaltılmış hareketi tercih edecek şekilde ayarlayabilir. Bu tercihi prefers-reduced-motion medya sorgusunu kullanarak algılayabilirsiniz:

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

Bu, animasyon tercihi olmayabilir. Daha az animasyon, özellikle de beklenmedik animasyon tercih edilir. Bu tercih ve genel performans hakkında daha fazla bilgiyi animasyon kılavuzumuzdan edinebilirsiniz.

Öğrendiklerinizi test etme

Animasyonlarla ilgili bilginizi test edin

@keyframes animasyonunun adı veya özel tanımlayıcısı büyük/küçük harfe duyarlıdır mı?

Evet

🎉

Hayır

CSS, 2 animasyonun aynı ada sahip olmasına izin vermez ancak SWOOP ve swoop'in birlikte var olmasına izin verir.

from ve to anahtar kelimeleri aşağıdakilerle aynıdır:

start ve end.

Tekrar deneyin.

0% ve 100%.

from, 0% ile aynıdır ve to, %100 ile aynıdır.

0 ve 1

Tekrar deneyin.

animation-timing-function genellikle şu adlarla da bilinir:

Dinamik zamanlama

Tekrar deneyin.

Gecikme

Tekrar deneyin.

Yavaşlatma

🎉

@keyframes animasyonunda gereken minimum anahtar kare sayısı nedir?

1

Tarayıcı, öğenin mevcut durumunu anahtar kare olarak alır. Bu nedenle en az 1 anahtar kare gereklidir.

2

Tekrar deneyin.

3

Tekrar deneyin.

4

Tekrar deneyin.