Animasyonlar

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

Bazen arayüzlerde, tıklandığında söz konusu bölüm hakkında bazı 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 açıkça belirten titreşimli bir animasyona sahiptir. Peki bunu CSS ile nasıl yapabilirsiniz?

CSS'de bu tür animasyonları, animasyon kareleri kullanarak animasyon dizisi ayarlamanıza olanak tanıyan CSS animasyonlarını kullanarak yapabilirsiniz. Animasyonlar basit, tek durumlu animasyonlar, hatta karmaşık, zamana dayalı diziler olabilir.

Animasyon karesi nedir?

Animasyon yazılımları, CSS ve bir şeyi canlandırmanızı sağlayan diğer araçların çoğunda, animasyon kareleri zaman çizelgesiyle birlikte zaman damgalarına animasyon durumları atamak için kullandığınız mekanizmadır.

Bunun için bağlam olarak "nabız" kullanalım. Animasyonun tamamı 1 saniye sürer ve 2 durumda çalışır.

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

@keyframes

Artık animasyon karelerinin ne olduğunu biliyorsunuz. Bu bilgiler CSS @keyframes kuralının nasıl çalıştığını anlamanıza yardımcı olacaktır. Burada, iki durum içeren temel bir kural verilmiştir.

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

Dikkat edilmesi gereken ilk bölüm, özel tanımlayıcı (özel tanımlayıcı) veya daha basit ifadeyle animasyon kareleri kuralının adıdır. Bu kuralın tanımlayıcısı my-animation. Özel tanımlayıcı, işlev adı gibi çalışır. İşlev modülünde öğrendiğiniz gibi, animasyon kareleri kuralına CSS kodunuzun başka bir yerinde referans verebilmenizi sağlar.

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ığı boyunca istediğiniz kadar konum ekleyebilirsiniz. "Atımlı" örneği bağlamında 2 animasyon karesine dönüşen 2 durum vardır. Bu, animasyon kareleri kuralınızın içinde bu animasyon karelerinin her birine ilişkin değişiklikleri temsil edecek 2 konumunuz olduğu anlamına gelir.

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

animation özellikleri

@keyframes öğenizi bir CSS kuralında kullanmak için çeşitli animasyon özellikleri tanımlayın veya animation kısayol özelliğini kullanın.

animation-duration

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

animation-duration özelliği, @keyframes zaman çizelgesinin ne kadar olması gerektiğini tanımlar. Zaman değeri olmalıdır. Varsayılan olarak 0 saniye değerine ayarlanır. Bu da animasyonun çalışmaya devam edeceği anlamına gelir, ancak animasyon çok hızlı olacaktır. Negatif zaman değerleri ekleyemezsiniz.

animation-timing-function

Animasyonda doğal hareketin yeniden oluşturulmasına yardımcı olmak için, her noktadaki animasyonun hızını hesaplayan zamanlama işlevlerini kullanabilirsiniz. Hesaplanan değerler genellikle kıvrımlıdır. Bu da animasyonun animation-duration boyunca değişken hızlarda çalışmasına neden olur. @keyframes öğesinde tanımlanan değerin ötesinde bir değer hesaplanırsa öğenin zıplıyor gibi görünmesine neden olur.

CSS'de hazır ayar olarak animasyon-zamanlama-fonksiyonu değeri 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;
}

Yumuşak geçiş, hızı modellemek için kullanılan bir bézier eğri kullanılarak hesaplandığından, değerler yumuşak geçiş işlevleriyle 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 daha yoğun bir eğri tanımlayabilirsiniz: x1, y1, x2, y2.

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

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

Daha yüksek eğrileri anlamak, karmaşık ve görsel araçlardan (ör. Lea Verou'nun bu oluşturucu) yardım almaktan geçer.

steps yumuşak geçiş işlevi

Bazen animasyonunuz üzerinde daha ayrıntılı kontrol sahibi olmak ve bir eğri boyunca ilerlemek yerine aralıklar halinde hareket etmek isteyebilirsiniz. steps() yumuşak geçiş işlevi, zaman çizelgesini tanımlanmış eşittir aralıklara bölebilmenizi sağlar.

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

İlk bağımsız değişken kaç adım olduğudur. Adımlar 10 olarak tanımlanırsa ve 10 animasyon karesi varsa her animasyon karesi, durumlar arasında geçiş olmadan tam olarak belirtilen süre boyunca sırayla oynatılır. Adımlar için yeterli animasyon karesi yoksa ikinci bağımsız değişkene bağlı olarak animasyon kareleri arasındaki adımlar eklenir.

İ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 olarak ayarlanırsa animasyonunuzun ilk adımı başlar başlamaz tamamlanır yani end adımından bir adım önce sona erer.

animation-iteration-count

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

animation-iteration-count özelliği, @keyframes zaman çizelgesinin kaç kez çalışması gerektiğini tanımlar. Varsayılan olarak 1'dir. Diğer bir deyişle, animasyon zaman çizelgenizin sonuna ulaştığında sonunda duracaktır. Sayı, negatif bir sayı olamaz.

Animasyonunuzu döngüye alacak infinite anahtar kelimesini kullanabilirsiniz. Bu dersin başlangıcındaki "Atım" demosu da bu şekilde çalışır.

animation-direction

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

animation-direction özelliğini kullanarak zaman çizelgesinin animasyon kareleriniz üzerinde hangi yönde çalışacağını ayarlayabilirsiniz:

• normal: Varsayılan değer (yönlendirmeler).
• reverse: Zaman çizelgenizde geriye doğru ilerler.
• alternate: Her animasyon yinelemesinde zaman çizelgesi sırayla ileri veya geri çalışır.
• alternate-reverse: alternate ifadesinin tersi.

animation-delay

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

animation-delay özelliği, animasyona başlamadan önce ne kadar bekleneceğini tanımlar. animation-duration özelliğinde olduğu gibi bu özellik de zaman değerini kabul eder.

animation-duration özelliğinin aksine, bunu negatif bir değer olarak tanımlayabilirsiniz. Negatif bir değer ayarlarsanız @keyframes içindeki zaman çizelgesi bu noktada başlar. Örneğin, animasyonunuz 10 saniye uzunluğundaysa ve animation-delay öğesini -5s olarak ayarlarsanız zaman çizelgenizin yarısından başlar.

animation-play-state

.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'dir. Bu değeri paused olarak ayarlarsanız animasyon duraklatılır.

animation-fill-mode

animation-fill-mode özelliği, @keyframes zaman çizelgenizdeki hangi değerlerin animasyon başlamadan veya sona erdikten sonra korunacağını 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, animasyon yönüne göre korunur.
• backwards: İlk animasyon karesi, animasyon yönüne göre korunur.
• both: Hem forwards hem de backwards için kurallara uyar.

animation stenosu

Tüm özellikleri ayrı olarak tanımlamak yerine, bunları bir animation kısayoluyla tanımlayabilirsiniz. Böylece animasyon özelliklerini aşağıdaki sırayla 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 sistemlerinde uygulamalar ve web siteleriyle etkileşim kurarken yaşanan hareketi azaltmayı tercih ettiklerini tanımlayabilir. Bu tercih, prefers-reduced-motion medya sorgusu kullanılarak tespit edilebilir.

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

Bu durum, animasyon kullanılmaması tercihinden ziyade animasyonları, özellikle de beklenmeyen olanları azaltmaya yönelik bir tercihtir. Bu animasyon kılavuzundan bu tercih ve genel performans hakkında daha fazla bilgi edinebilirsiniz.

Öğrendiklerinizi sınayın

Animasyonlarla ilgili bilginizi test edin