Animasyonlar

Animasyon, etkileşimli öğeleri vurgulamanın ve tasarımlarınıza ilgi ve eğlence eklemenin harika bir yoludur. Bu modülde, CSS ile animasyon efektlerini nasıl ekleyeceğinizi ve kontrol edeceğinizi öğreneceksiniz.

Bazen arayüzlerde, tıkladıkları bölümle ilgili yararlı bilgiler sağlayan küçük yardımcılar görürsünüz. Bunlar, genellikle bilginin orada olduğunu ve etkileşimde bulunulması gerektiğini size bildirmeden önce yanıp sönen bir animasyona sahiptir. Bu modülde, bu yardımcıları ve diğer animasyonları CSS kullanarak nasıl oluşturacağınız gösterilmektedir.

Yanıp sönen simgeler, kullanıcılarınızın önemli bilgilere dikkat etmesini sağlamanın bir yoludur.

Animasyon kareleri olan bir animasyon sırası ayarlamak için CSS'yi kullanabilirsiniz. Bu diziler temel, tek durumlu animasyonlar veya karmaşık, zamana dayalı diziler olabilir.

Animasyon karesi nedir?

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

Örneğin, yanıp sönen "yardımcı" noktayla ilgili zaman çizelgesini burada görebilirsiniz. Animasyon 1 saniye sürer ve 2 durum içerir.

Yanıp sönen animasyonun durumları.

Bu animasyon durumlarının her birinin başladığı ve bittiği belirli bir nokta vardır. Bunları animasyon kareleri ile zaman çizelgesinde eşliyorsunuz.

Animasyon kareleri olan yanıp sönen animasyon.

@keyframes

Tarayıcı Desteği

• 43
• 12
• 16
• 9

Kaynak

CSS @keyframes animasyon animasyon kareleri ile aynı kavrama dayanır.

Aşağıda, iki durum içeren bir örnek verilmiştir:

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

İlk önemli parça, animasyon kareleri kuralının adı olan özel tanımlayıcıdır (custom-ident). Bu örnekteki tanımlayıcı my-animation. Özel tanımlayıcı, bir işlev adı gibi çalışarak CSS kodunuzun başka bir yerinde animasyon kareleri kuralına referans verebilmenizi sağlar.

Not: <custom-ident>, öğeler için kendi adınızı sağlamanıza olanak tanımak amacıyla CSS'de çeşitli yerlerde kullanılı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 Kılavuzunda 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% ve 100%'yi temsil eden anahtar kelimelerdir. Aynı kuralı şu şekilde yeniden oluşturabilirsiniz:

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

Zaman aralığı içinde istediğiniz kadar konum ekleyebilirsiniz. Yanıp sönen yardımcı örnekte, iki animasyon karesine dönüşen iki durum vardır. Diğer bir deyişle, animasyon kareleri kuralınızın içinde bu animasyon karelerinin her birinde yapılan değişiklikleri temsil etmek için iki konum bulunur.

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

Animasyonun nasıl değiştiğini görmek için pulse kuralını düzenlemeyi deneyin.

animation özellikleri

Tarayıcı Desteği

• 43
• 12
• 16
• 9

Kaynak

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

animation-duration

Tarayıcı Desteği

• 43
• 12
• 16
• 9

Kaynak

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

animation-duration özelliği, @keyframes zaman çizelgesinin ne kadar süre boyunca zaman değeri olarak olması gerektiğini tanımlar. Varsayılan olarak 0 saniye değerine ayarlanır. Bu, animasyonun çalışmaya devam edeceği anlamına gelir ancak animasyonu göremeyeceğiniz kadar hızlıdır. Negatif zaman değerleri kullanamazsınız.

animation-timing-function

Tarayıcı Desteği

• 43
• 12
• 16
• 9

Kaynak

Animasyonda doğal hareketin yeniden oluşturulmasına yardımcı olmak için animasyonun her bir noktada hızını hesaplayan zamanlama işlevlerini kullanabilirsiniz. Hesaplanan değerler genellikle kavisli olur. Bu da animasyonun animation-duration boyunca değişken hızlarda çalışmasına neden olur ve tarayıcı @keyframes içinde tanımlanandan daha fazla bir değer hesaplarsa öğenin zıplıyormuş gibi görünmesini sağlar.

CSS'de hazır ayar olarak animation-timing-function için değer olarak kullanılan birkaç anahtar kelime vardır: linear, ease, ease-in, ease-out, ease-in-out.

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

Animasyonun kullandığı zamanlama işlevini değiştirmeyi deneyin.

Yumuşak geçiş, hızı modellemek için kullanılan bir işlev türü olan Bézier eğrisi kullanılarak hesaplandığından, yumuşak geçiş işlevi değerleri eğri 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, dört sayı değerini kabul eden cubic-bezier() işlevini kullanarak doğrudan bir Bézier eğrisi tanımlayabilirsiniz: x1, y1, x2, y2.

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

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

Bézier eğrisi örneği.

Bézier eğrilerini anlamak karmaşık bir süreçtir. Lea Verou'nun jeneratörü gibi görsel araçlar çok faydalı oluyor.

steps yumuşak geçiş işlevi

Bazen bir eğri boyunca ilerlemek yerine aralıklar içinde hareket ederek animasyonunuzu daha ayrıntılı bir şekilde kontrol etmek isteyebilirsiniz. steps() yumuşak geçiş işlevi, zaman çizelgesini eşit sürede tanımlanmış aralıklara bölebilmenizi sağlar.

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

İlk bağımsız değişken sayıdır. Adımlarla aynı sayıda animasyon karesi varsa her bir animasyon karesi, durumlar arasında geçiş olmadan adımın tam süresi boyunca sırayla oynatılır. Adımlardan daha az animasyon karesi varsa 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 değer olan end değerine ayarlanırsa adımlar zaman çizelgenizin sonunda biter. start değerine ayarlanırsa animasyonunuzun ilk adımı başlar başlamaz tamamlanır, yani end adımından bir adım önce sona erer.

Animasyonları adımları olan ve olmayanları karşılaştırın.

animation-iteration-count

Tarayıcı Desteği

• 43
• 12
• 16
• 9

Kaynak

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

animation-iteration-count özelliği, @keyframes zaman çizelgesinin animasyon sırasında kaç kez çalışması gerektiğini tanımlar. Varsayılan olarak 1 değeri, animasyonun zaman çizelgenizin sonuna ulaştığında duracağı anlamına gelir. Bu değer negatif bir sayı olamaz.

Bu animasyonun yineleme sayısını değiştirmeyi deneyin.

Animasyonunuzu döngüye sokmak için yineleme sayısını infinite olarak ayarlayın. Dersin başlangıcından itibaren yanıp sönen animasyon bu şekilde çalışır.

Yanıp sönen animasyon sonsuz sayıda yinelenir.

animation-direction

Tarayıcı Desteği

• 43
• 12
• 16
• 9

Kaynak

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

Aşağıdaki değerleri alan animation-direction'ı kullanarak zaman çizelgesinin animasyon kareleriniz üzerinde hangi yönde çalışacağını ayarlayabilirsiniz:

• normal: Yönlendirilen varsayılan değerdir.
• reverse: Zaman çizelgenizde geriye doğru çalışır.
• alternate: Her animasyon yinelemesi için zaman çizelgesi, ileri ve geri gitme arasında değişir.
• alternate-reverse: alternate gibidir, ancak animasyon zaman çizelgesi geri giderek başlar.

Animasyon yönünü değiştirmeyi deneyin.

animation-delay

Tarayıcı Desteği

• 43
• 12
• 16
• 9

Kaynak

.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 özelliğinde olduğu gibi, bu özellik de bir zaman değeri alır.

animation-duration işlevinin aksine animation-delay öğesini negatif değer olarak tanımlayabilirsiniz. Bu, animasyonun zaman çizelgenizde karşılık gelen noktada başlamasını sağlar. Örneğin, animasyonunuz 10 saniye uzunluğundaysa ve animation-delay öğesini -5s olarak ayarlarsanız animasyon, zaman çizelgenizin ortasından başlar.

Animasyon gecikmesini değiştirmeyi deneyin.

animation-play-state

Tarayıcı Desteği

• 43
• 12
• 16
• 9

Kaynak

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

animation-play-state özelliği, animasyonu oynatmanıza ve duraklatmanıza olanak tanır. Varsayılan değer running değeridir. paused değerine ayarlarsanız animasyon duraklatılır.

Animasyonu duraklatmak için imlecinizi animasyonlu öğenin üzerinde tutun.

animation-fill-mode

Tarayıcı Desteği

• 43
• 12
• 16
• 9

Kaynak

animation-fill-mode özelliği, @keyframes zaman çizelgenizdeki hangi değerlerin animasyon başlamadan önce veya sona erdikten sonra devam edeceğini tanımlar. Varsayılan değer none, yani animasyon tamamlandığında zaman çizelgenizdeki değerler silinir. Diğer seçenekler şunlardır:

• forwards: Son animasyon karesi, animasyonun yönüne göre sabit kalır.
• backwards: İlk animasyon karesi, animasyonun yönüne göre kalır.
• both: Hem ilk hem de son animasyon kareleri korunur.

Dolgu modunu değiştirmeyi deneyin.

animation kısaltması

Her bir özelliği ayrı olarak 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;
}

Animasyonla çalışırken dikkat edilmesi gereken noktalar

Kullanıcılar, işletim sistemlerini uygulamalar ve web siteleriyle etkileşimde bulunurken az hareket edecek şekilde ayarlayabilir. Bu tercihi, prefers-reduced-motion medya sorgusunu kullanarak tespit edebilirsiniz:

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

Bu, animasyon olmaması için yapılan bir tercih değildir. Daha az animasyon, özellikle de daha az beklenmedik animasyon tercih edilir. Bu tercih ve genel performans hakkında daha fazla bilgiyi animasyon kılavuzumuzda bulabilirsiniz.

Küçültülmüş animasyon örneğini deneyin.

Öğrendiklerinizi sınayın

Animasyonlarla ilgili bilginizi test edin

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

Evet

🎉

Hayır

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

from ve to anahtar kelimeleri şu şekilde aynı:

start ve end.

Tekrar deneyin.

0% ve 100%.

from değeri 0% ile aynı; to değeri %100 ile aynı.

0 ve 1

Tekrar deneyin.

animation-timing-function, yaygın olarak şu şekilde de bilinir:

Dinamik zamanlama

Tekrar deneyin.

Gecikme

Tekrar deneyin.

Yavaşlatma

🎉

@keyframes animasyonu için gereken minimum animasyon karesi sayısı nedir?

1

Tarayıcı, öğenin geçerli durumunu animasyon karesi olarak alır. Bu nedenle, en az 1 animasyon karesi gereklidir.

2

Tekrar deneyin.

3

Tekrar deneyin.

4

Tekrar deneyin.