CSS Animasyonları Eğitimi: Yeni Başlayanlar İçin Eksiksiz Kılavuz

Bu, yeni başlayanlar için eksiksiz bir sözdizimi kılavuzu ve etkileşimli CSS animasyonları öğreticisidir. CSS animasyon spesifikasyonunun farklı kısımlarını öğrenmek için referans olarak kullanın.

Tarayıcı performansı son 10 yılda çok yol kat etti. Oluşturma ve performans sorunları potansiyeli nedeniyle web sayfalarına etkileşimli animasyonlar eklemek çok daha zordu. Ancak günümüzde, CSS animasyonları çok daha özgürce kullanılabilir ve sözdizimini öğrenmek, grid veya flexbox gibi CSS özelliklerine kıyasla genellikle çok daha kolaydır.

W3C CSS animasyon spesifikasyonunun parçası olan farklı özellikler vardır. Bazılarının kullanımı diğerlerinden daha kolaydır. Bu CSS ana kare animasyonları öğreticisi, farklı özelliklerin her biri dahil olmak üzere tüm sözdizimini inceleyecektir. CSS animasyonlarıyla nelerin mümkün olduğunu anlamanıza yardımcı olacak etkileşimli demolar ekleyeceğim.

@keyframes sözdizimi

Her CSS animasyonunun iki bölümü vardır: @keyframes kuralı kullanılarak tanımlanan bir dizi animasyon ana karesiyle birlikte bir veya daha fazla animation-* özelliği. Bir @keyframes kural seti oluşturmaya nelerin dahil olduğuna ayrıntılı olarak bir göz atalım.

Sözdizimi şöyle görünür:

 @keyframes moveObject 0% transform: translateX(0); 50% transform: translateX(300px); 100% transform: translateX(300px) scale(1.5);

Burada gösterildiği gibi, @keyframes kuralı üç temel bölümden oluşur:

• @keyframes kuralı ve ardından özel bir animasyon adı
• Tüm ana kareleri saran bir küme kaşlı ayraç
• Bir veya daha fazla animasyon karesi, her biri yüzdeli ve ardından küme parantezleriyle çevrelenmiş bir kural kümesi

CSS animasyonları öğreticimizin bu ilk örneğinde, animasyonumu moveObject adıyla tanımladım. Bu, istediğim herhangi bir ad olabilir, büyük/küçük harf duyarlıdır ve CSS'deki özel tanımlayıcı kurallarına uymalıdır. Bu özel ad, animation-name özelliğinde kullanılan adla eşleşmelidir (daha sonra tartışılacaktır).

Örneğimde, animasyonumdaki ana karelerin her birini tanımlamak için yüzdeler kullandığımı fark edeceksiniz. Animasyonum 0% 100% eşit ana kareler içeriyorsa, alternatif olarak from ve to anahtar sözcüklerini kullanabilirim:

 @keyframes moveObject from transform: translateX(0); 50% transform: translateX(300px); to transform: translateX(300px) scale(1.5);

Aşağıdaki etkileşimli CodePen, canlı bir örnekte yukarıdaki sözdizimini kullanır:

Demoda, animasyonu sıfırlayan bir düğme ekledim. Bunun neden gerekli olduğunu daha sonra açıklayacağım. Ancak şimdilik, bu animasyonun bu animasyon dizisindeki adımları temsil eden üç ana kare içerdiğini bilin: başlangıç, %50 adım ve bitiş (yani, %0, %50 ve %100). Bunların her biri, o adımdaki özellikleri tanımlamak için küme parantezleri ile birlikte ana kare seçici olarak adlandırılan şeyi kullanır.

@keyframes sözdizimi hakkında dikkat edilmesi gereken bazı noktalar:

• Ana kare kural kümelerini istediğiniz sıraya koyabilirsiniz ve tarayıcı bunları yüzdelerine göre belirlenen sırayla çalıştırmaya devam eder.
• %0 ve %100 ana kareleri atlayabilirsiniz; tarayıcı bunları, canlandırılan öğedeki mevcut stiller tarafından otomatik olarak belirleyecektir.
• Farklı kural kümelerine sahip yinelenen ana kareler varsa (örneğin, farklı bir dönüştürme değerine sahip %20 için iki ana kare), tarayıcı sonuncuyu kullanır
• Tek bir anahtar kare seçicide birden çok ana kareyi virgülle tanımlayabilirsiniz: 10%, 30% ...
• !important anahtar sözcüğü, herhangi bir özellik değerini geçersiz kılar, bu nedenle bir ana kare kural kümesi içindeki bir özellik üzerinde kullanılmamalıdır.

Artık bu CSS animasyon eğitiminde @keyframes sözdizimini iyice anladığınıza göre, şimdi canlandırılan öğede tanımlanan farklı animasyon özelliklerine bir göz atalım.

Ele alacağımız animasyon özellikleri:

animasyon adı özelliği

Belirtildiği gibi, oluşturduğunuz her CSS animasyonunun @keyframes söz diziminde görünen bir adı olmalıdır. Bu ad, animation-name özelliği kullanılarak tanımlanan adla aynı olmalıdır.

Önceki demodaki CSS'yi kullanarak, sözdizimi şöyle görünür:

 .box animation-name: moveObject;

Yine, tanımladığım özel ad, bir @keyframes at-rule için bir ad olarak mevcut olmalıdır - aksi takdirde bu ad hiçbir şey yapmaz. Bunu JavaScript'teki bir işlev çağrısı gibi düşünebilirsiniz. İşlev çağrısı, animation-name: moveObject iken, işlevin kendisi @keyframes moveObject kısmı olacaktır.

animation-name hakkında akılda tutulması gereken bazı şeyler:

• animation-name için ilk değer none olup, bu, hiçbir ana karenin etkin olmadığı anlamına gelir. Bu, bir animasyonu devre dışı bırakmak için bir tür 'geçiş' olarak kullanılabilir.
• Seçtiğiniz ad büyük/küçük harf duyarlıdır ve harfler, sayılar, alt çizgiler ve kısa çizgiler içerebilir.
• Addaki ilk karakter bir harf veya kısa çizgi olmalıdır, ancak yalnızca tek bir kısa çizgi olmalıdır.
• Ad, unset , initial veya inherit gibi ayrılmış bir sözcük olamaz.

animasyon süresi özelliği

animation-duration özelliği, sürpriz değil, bir animasyonun baştan sona bir kez çalıştırılması için geçen süreyi tanımlar. Bu değer, aşağıda gösterildiği gibi saniye veya milisaniye cinsinden belirtilebilir:

 .box animation-duration: 2s;

Yukarıdakiler, aşağıdakilere eşdeğer olacaktır:

 .box animation-duration: 2000ms;

Aşağıdaki CodePen demosunda animation-duration özelliğini çalışırken görebilirsiniz. Bu demoda, animasyonun ne kadar sürmesini istediğinizi seçebilirsiniz. Saniye veya milisaniye cinsinden çeşitli değerler girmeyi deneyin, ardından animasyonu çalıştırmak için "Kutuyu Canlandır" düğmesini kullanın.

Birim için ms ile birlikte küçük bir sayı kullanırsanız, herhangi bir hareket fark etmeyebilirsiniz. Milisaniye kullanıyorsanız daha yüksek bir sayı ayarlamayı deneyin.

animation-duration kullanmayla ilgili bazı notlar:

• Negatif değerler geçersiz
• Süre 0s (başlangıç ​​değeri) olarak ayarlansa bile birim dahil edilmelidir.
• Kesirli değerler kullanabilirsiniz (örneğin, 0.8s )

animasyon-zamanlama-fonksiyonu özelliği

Anlamında önceki iki özellik kadar açık olmayan animation-timing-function , CSS animasyonunun ilerleme şeklini tanımlamak için kullanılır. Bu en net açıklama olmayabilir, ancak sözdizimi açıklığa kavuşturmaya yardımcı olabilir.

Deklarasyon şöyle görünür:

 .box animation-timing-function: linear;

Bu özellik, aşağıdaki anahtar kelime değerlerini kabul eder:

• ease (başlangıç ​​değeri)
• ease-in
• ease-out
• ease-in-out
• linear
• step-start
• step-end

Değerlerin çoğunu adlarından anlamak nispeten kolaydır, ancak aşağıdaki etkileşimli demoyu kullanarak nasıl farklı olduklarını görebilirsiniz:

Yedi anahtar kelime değerinden birini seçmek için seçim girişini kullanın. Kolaylık- ease-* değerlerinin animasyonu çeşitli şekillerde 'kolaylaştırdığını' unutmayın. Doğrusal bir değer baştan sona tutarlıdır.

animation-timing-function özelliği ayrıca aşağıdaki işlevleri kabul eder:

• cubic-bezier() – Virgülle ayrılmış dört sayı değerini bağımsız değişken olarak kabul eder
• steps() – Bir sayı ve bir "atlama terimi" olmak üzere virgülle ayrılmış iki değeri bağımsız değişken olarak kabul eder

step-start ve step-end anahtar kelime değerleri, sırasıyla steps(1, jump-start) ve steps(1, jump-end) değerlerine eşdeğerdir.

cubic-bezier() ile ilgili olarak, aşağıdaki etkileşimli demo, işlevi biraz daha iyi anlamanıza yardımcı olabilir:

cubic-bezier() işlevinde dört argümanı ayarlamanıza izin verdiğine dikkat edin. Argümanlardan ikisi negatif olabilir ve ikisi 0 ile 1 arasındaki ondalık değerlerle sınırlandırılmıştır. Bu tür zamanlama işlevlerinin nasıl çalıştığına dair iyi bir açıklama için bu makaleye veya bu etkileşimli araca göz atabilirsiniz.

steps() işlevi ise iki argümanı kabul eder:

• Animasyonun tek bir döngüsü boyunca eşit "durmayı" temsil eden bir tam sayı.
• Animasyonun belirli aralıklarla "tutup tutmayacağını" belirleyen, "jumpterm" adı verilen isteğe bağlı bir anahtar kelime

Yine, etkileşimli bir demo, bu atlama terimlerinin nasıl çalıştığını anlamanıza yardımcı olacaktır:

Farklı anahtar kelimelerin farklı tamsayı değerleriyle nasıl farklılık gösterdiğini görmek için bir atlama terimiyle birlikte bir tam sayı seçmeyi (veya atlama terimi olmadan deneyin) deneyin. Görünüşe göre negatif tam sayılara izin veriliyor, ancak 0 ile herhangi bir negatif değer arasında bir fark görmüyorum.

animasyon-yineleme-sayısı özelliği

Bazı durumlarda, bir animasyon bir kez çalıştırıldığında mutlu olursunuz, ancak bazen bir animasyonun birden çok kez çalışmasını istersiniz. animation-iteration-count özelliği, animasyonun kaç kez çalıştırılmasını istediğinizi temsil eden pozitif bir sayıyı kabul ederek bunu yapmanızı sağlar:

 .box animation-iteration-count: 3;

animation-iteration-count için başlangıç ​​değeri 1 , ancak aynı zamanda infinite (kendi kendini açıklayan) anahtar sözcüğünü kullanabilir veya kesirli bir değer kullanabilirsiniz. Kesirli bir değer, animasyonu kesirli çalıştırmada yarı yolda çalıştıracaktır:

 .box animation-iteration-count: 3.5;

Yukarıdaki kod, animasyonu üç buçuk kez çalıştırır. Yani, üç tam yineleme ve ardından tam olarak yarısında duran bir son yineleme.

Bu özellik, en çok, animation-direction özelliği ile birlikte kullanıldığında yararlıdır (sırada ele alınacaktır), çünkü yalnızca baştan çalışan bir animasyon, birden fazla çalıştırıldığında son derece yararlı değildir.

Etkiyi görebilmeniz için yineleme sayısı için kesirli bir değer seçmenize olanak tanıyan aşağıdaki demoyu deneyebilirsiniz:

animasyon yönü özelliği

Bu CSS animasyonları eğitiminde yukarıda bahsedildiği gibi, animation-direction özelliği, animation-iteration-count ile birlikte iyi çalışır. animation-direction özelliği, animasyonun hangi yönde oynamasını istediğinizi tanımlamanıza olanak tanır. Sözdizimi şöyle görünür:

 .box animation-direction: alternate;

Değeri dört anahtar kelimeden biri olarak ayarlayabilirsiniz:

• normal – Animasyon ilk yinelemede ileriye doğru oynatılır (varsayılan)
• reverse – Animasyon ilk yinelemede geriye doğru oynatılır
• alternate - Animasyon ilk yinelemede ileriye doğru oynatılır, ardından sonraki yinelemelerde dönüşümlü olarak oynatılır
• alternate-reverse – alternate ile aynı, ancak ilk yinelemede geriye doğru oynatır

Aşağıdaki etkileşimli demoyu kullanarak farklı değerleri farklı yineleme sayılarıyla deneyebilirsiniz:

animasyon oynatma durumu özelliği

animation-play-state özelliği, statik bir CSS ortamında son derece kullanışlı değildir, ancak JavaScript ve hatta CSS aracılığıyla etkileşimli animasyonlar yazarken kullanışlı olabilir.

Bu özellik iki değeri kabul eder: running veya paused :

 .box animation-direction: paused;

Varsayılan olarak, herhangi bir animasyon "çalışıyor" durumundadır. Ancak mülkün değerini değiştirmek için JavaScript'i kullanabilirsiniz. Animasyonu "duraklatılmış" bir duruma değiştirmek için :hover veya :focus gibi etkileşimli bir CSS özelliğini bile kullanabilirsiniz; bu, animasyonu geçerli yinelemede nerede olursa olsun dondurur.

Aşağıdaki etkileşimli demo, animasyonu "duraklatmak" ve "devam ettirmek" için iki düğmeyle sonsuz çalışan bir animasyona sahiptir.

animasyon gecikme özelliği

Bazı animasyonlar hemen animasyona başlamak için tasarlanmıştır, diğerleri ise ilk yinelemeden önce hafif bir gecikmeden yararlanabilir. animation-delay özelliği, bunu gerçekleştirmenizi sağlar.

 .box animation-delay: 4s;

Diğer zamana dayalı değerler gibi, animation-delay saniye veya milisaniye kullanarak bir değere ayarlayabilirsiniz. Kesirli değerler de kullanabilirsiniz.

Gecikmenin her yinelemede değil, yalnızca ilk yinelemede gerçekleştiğine dikkat etmek önemlidir. Aşağıdaki etkileşimli demoyu kullanarak bunu deneyebilirsiniz:

Demo size gecikmenin yanı sıra yineleme değerini de değiştirme seçeneği sunar, böylece gecikmenin sonraki yinelemeleri etkilemediğini görebilirsiniz - yalnızca ilkini.

Bu özelliği kullanmanın ilginç bir yolu, negatif bir değerdir. Örneğin, yukarıdaki demoyu kullanarak animation-delay -0.5s olarak ayarlamayı deneyin. Negatif gecikmenin neredeyse bir zaman makinesinde ileri gitmek gibi çalıştığını fark edeceksiniz - animasyon başlangıçtan ziyade kısmen başlıyor.

Animasyon doldurma modu özelliği

Bu CSS animasyonları eğitiminde ele alacağım son el yazısı özelliği, önceki demoda kullandığım özelliktir. Animasyon son yinelemeyi durdurduğunda kutunun olduğu yerde kaldığını fark edeceksiniz. Bu, animation-fill-mode kullanılarak gerçekleştirilir.

 .box animation-fill-mode: forwards;

Bu özellik, bir animasyonun, yürütmeden önce ve sonra hedeflenen öğeye stilleri nasıl uygulayacağını belirler. Bunu kavramsal olarak kavramak biraz zor, bu yüzden her bir değerin anlamını ele alacağım; daha sonra interaktif demoyu kullanarak değerleri karşılaştırabilirsiniz.

Bu özellik, aşağıdaki dört anahtar kelime değerini kabul eder:

• none – Varsayılan, yürütmeden önce veya sonra hiçbir stil uygulanmadı
• forwards - Animasyonun son ana karesinde uygulanan tüm stilleri korur
• backwards – Önceki değerin aşağı yukarı tersidir, animasyona uygulanan stilleri yürütmeye başlar başlamaz ancak animasyon başlamadan önce korur
• both – Hem forwards hem de backwards için stilleri korur

Bu CSS animasyonları eğitimindeki son demo, işleri biraz daha netleştirecek, ancak bu, gerçekten ne yaptığını ve nasıl başardığını anlamadan önce çok fazla oynamayı gerektirebilir.

Kolaylık olması için tüm demoları tek bir CodePen Koleksiyonu'na ekledim.

Tüm bunların görünüm üzerinde etkisi olabileceğinden, demonun doldurma modunu, gecikmeyi, yönü ve yineleme sayısını ayarlamanıza izin verdiğini fark edeceksiniz. Ayrıca ilk animasyon karesindeki animasyonlu kutuya farklı bir arka plan rengi ekledim, bu da yine doldurma modu değerlerinin biraz daha net olmasına yardımcı oluyor. animation-fill-mode nasıl çalıştığını hala tam olarak anlamadıysanız, animation-fill-mode derinlemesine tartışan daha eski bir makaleye göz atabilirsiniz.

Animasyon stenografi özelliği

Yeni başlayanlar için bu CSS animasyon eğitiminde sekiz farklı özelliği ele aldım ve uzun eli kullanmanızı tavsiye ederim. Bu, ayarlanan açık değerleri görmenizi kolaylaştıracaktır.

Özelliklerin her biri hakkında iyi bir anlayışa sahip olduğunuzda, tüm uzun metrajlı özellikleri tek bir bildirimde tanımlamanıza izin veren animation stenografi özelliğini kullanma seçeneğiniz vardır.

 .box animation: moveObject 2s ease-in-out 3 reverse running 1.3s forwards;

Dürüst olmak gerekirse, tek bir satırda çok fazla bilgi var. Bildiri tüm özellikleri içermiyorsa, ancak belki sadece üç veya dördünü içermiyorsa, stenografiyi kullanmanızı tavsiye ederim.

Kısa yolu kullanırsanız, değerleri istediğiniz sıraya koyabilirsiniz, ancak aşağıdaki kurallara dikkat edin:

• Zamanı tanımlayan ilk değer animation-duration ; sonraki herhangi bir zaman değeri, animation-delay .
• Bir anahtar kelime ile animation-name arasında bir çakışma varsa, ilk olarak göründüğü takdirde anahtar kelime değeri öncelikli olacaktır.
• Herhangi bir CSS steno özelliğinde olduğu gibi, atlanan değerler ilk durumlarına geri dönecektir.

Tek bir öğeye birden çok animasyon uygulama

Dikkat edilmesi gereken son bir özellik de, animasyonları virgülle ayırarak tek bir nesneye birden çok animasyon uygulama seçeneğiniz olmasıdır.

İşte stenoyu kullanan bir örnek:

 .box animation: moveObject 2s ease-in-out, fadeBox 3s linear;

Burada, iki farklı ana kare kümesiyle eşleşecek, ancak aynı nesneye uygulanacak iki farklı animasyon tanımladım. Aynı kod uzun el yazısıyla şu şekilde yazılabilir:

 .box animation-name: moveObject, fadeBox; animation-duation: 2s, 3s; animation-timing-function: ease-in-out, linear;

Her özelliğin virgülle ayrılmış iki değeri nasıl içerdiğine dikkat edin. Bu durumda, stenonun okunması ve bakımı kesinlikle daha kolay olacaktır.

Bu CSS animasyonları eğitimini tamamlama

Son bir uyarı: Animasyonu ölçülü kullanın ve bazı web kullanıcılarının yanıp sönen renklerden ve diğer hızlı hareket eden nesnelerden olumsuz etkilenebileceğini unutmayın.