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

Bu, yeni başlayanlar için tam bir sözdizimi kılavuzu ve etkileşimli CSS animasyonları öğreticisidir. CSS animasyon spesifikasyonunun farklı bölümlerini öğ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 eskiden çok daha zorlayıcıydı. Ancak günümüzde, CSS animasyonları çok daha özgürce kullanılabiliyor ve sözdizimini öğrenmek, grid veya flexbox gibi CSS özelliklerine kıyasla genellikle çok daha kolay.

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 gözden geçirecektir. 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: Bir veya daha fazla animation-* özellikleri kullanılarak tanımlanan bir dizi animasyon ana karesi ile birlikte @keyframes at-kural. Bir bina inşa etmeye nelerin dahil olduğuna ayrıntılı olarak bir göz atalım. @keyframes kural seti.

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 at-rule üç temel bölümden oluşur:

• bu @keyframes kuralı ve ardından özel bir animasyon adı
• Tüm ana kareleri saran bir küme parantez
• Her biri bir yüzdeye ve ardından kıvrık ayraçlarla çevrelenmiş bir kural kümesine sahip bir veya daha fazla anahtar kare

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

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

@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’lik adım ve bitiş (ör. %0, %50 ve %100). Bunların her biri, o adımdaki özellikleri tanımlamak için süslü parantezlerle birlikte ana kare seçici olarak adlandırılan şeyi kullanır.

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

• Animasyon karesi kural kümelerini istediğiniz herhangi bir sıraya koyabilirsiniz ve tarayıcı bunları yüzdelerine göre belirlenen sırada çalıştırmaya devam eder.
• %0 ve %100 ana kareleri atlayabilirsiniz; tarayıcı bunları, canlandırılmakta olan öğedeki mevcut stillere göre otomatik olarak belirleyecektir.
• Farklı kural kümelerine sahip yinelenen anahtar kareler varsa (örn. %20 için farklı bir dönüşüm değerine sahip iki anahtar kare), tarayıcı sonuncuyu kullanır
• Tek bir anahtar kare seçicide virgülle birden fazla anahtar kare tanımlayabilirsiniz: 10%, 30% { ... }
• bu !important anahtar kelime, herhangi bir özellik değerini geçersiz kılar, bu nedenle bir anahtar kare kural kümesi içindeki bir özellikte kullanılmamalıdır.

👉 Artık konuyu iyice anladığınıza göre @keyframes Bu CSS animasyon eğitiminde sözdizimi, animasyonlu öğe üzerinde tanımlanan farklı animasyon özelliklerine bir göz atalım.

Ele alacağımız animasyon özellikleri:

animasyon-adı özelliği

Bahsedildiği gibi, oluşturduğunuz her CSS animasyonunun, içinde görünen bir adı olmalıdır. @keyframes sözdizimi. Bu ad, kullanılarak tanımlanan adla aynı olmalıdır. animation-name Emlak.

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

.box {
  animation-name: moveObject;
}

Yine, tanımladığım özel ad aynı zamanda bir @keyframes at-rule — aksi takdirde bu ad hiçbir şey yapmaz. Bunu şöyle düşünebilirsiniz işlev çağrısı JavaScript’te. Fonksiyonun kendisi şu olurdu: @keyframes moveObject {} işlev çağrısı yapılırken kodun bir kısmı animation-name: moveObject.

Akılda tutulması gereken bazı şeyler animation-name:

• için başlangıç ​​değeri animation-name dır-dir none, bu da hiçbir animasyon karesinin etkin olmadığı anlamına gelir. Bu, bir animasyonu devre dışı bırakmak için bir çeşit “geçiş” olarak kullanılabilir.
• Seçtiğiniz ad büyük/küçük harfe 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, gibi ayrılmış bir kelime olamaz unset, initialveya inherit.

animasyon süresi özelliği

bu animation-duration özellik, şaşırtıcı değil, bir animasyonun baştan sona bir kez çalışması için gereken süreyi tanımlar. Bu değer, aşağıda gösterildiği gibi saniye veya milisaniye cinsinden belirtilebilir:

.box {
  animation-duration: 2s;
}

Yukarıdaki, aşağıdakine eşdeğer olacaktır:

.box {
  animation-duration: 2000ms;
}

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

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

kullanımına ilişkin bazı notlar animation-duration:

• Negatif değerler geçersiz
• Süre olarak ayarlanmış olsa bile birim dahil edilmelidir. 0s (ilk değer)
• Kesirli değerler kullanabilirsiniz (örn. 0.8s)

Animation-timing-function özelliği

bu animation-timing-functionanlamında önceki iki özellik kadar açık olmayan , CSS animasyonunun ilerleme şeklini tanımlamak için kullanılır. Bu en net açıklama olmayabilir, ancak sözdizimi netleştirmeye 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 (ilk değer)
• ease-in
• ease-out
• ease-in-out
• linear
• step-start
• step-end

Değerlerin çoğunun adlarından anlaşılması nispeten kolaydır, ancak aşağıdaki etkileşimli demoyu kullanarak bunların nasıl farklılık gösterdiğini görebilirsiniz:

Yedi anahtar kelime değerinden birini seçmek için seçme girişini kullanın. Not ease-* değerler animasyonu çeşitli şekillerde ‘kolaylaştırır’. Doğrusal bir değer baştan sona tutarlıdır.

bu animation-timing-function property ayrıca aşağıdaki işlevleri de kabul eder:

• cubic-bezier() – Virgülle ayrılmış dört sayı değerini bağımsız değişken olarak kabul eder
• steps() – Argüman olarak iki değeri, bir sayıyı ve virgülle ayrılmış bir “atlama terimini” kabul eder

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

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

Demonun dört bağımsız değişkeni ayarlamanıza izin verdiğine dikkat edin. cubic-bezier() işlev. Bağımsız değişkenlerden 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 şuraya bakabilirsiniz. Bu makale veya bu etkileşimli araç.

bu steps() işlev ise iki bağımsız değişkeni kabul eder:

• Animasyonun tek bir döngüsü boyunca eşit “durakları” temsil eden bir tamsayı.
• Animasyonun belirli aralıklarla “tutulduğunu” 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 atlama terimiyle birlikte bir tamsayı seçmeyi deneyin (veya atlama terimi olmadan deneyin). Görünüşe göre negatif tam sayılara izin veriliyor, ancak 0 ile herhangi bir negatif değer arasında herhangi bir fark görmüyorum.

Animation-iteration-count özelliği

Bazı durumlarda, bir animasyon bir kez çalışırsa mutlu olursunuz, ancak bazen bir animasyonun birden çok kez çalışmasını istersiniz. bu animation-iteration-count özelliği, animasyonun çalışmasını istediğiniz sayıyı temsil eden pozitif bir sayı kabul ederek bunu yapmanıza olanak tanır:

.box {
  animation-iteration-count: 3;
}

için başlangıç ​​değeri animation-iteration-count dır-dir 1 ancak anahtar kelimeyi de kullanabilirsiniz infinite (kendi kendini açıklayan) veya kesirli bir değer kullanın. Kesirli bir değer, animasyonu kesirli çalıştırmanın bir kısmında çalıştırır:

.box {
  animation-iteration-count: 3.5;
}

Yukarıdaki kod, animasyonda üç buçuk kez çalışır. Yani, tam olarak yarı yolda duran son bir yinelemenin ardından üç tam yineleme.

Bu özellik en çok aşağıdakilerle birlikte kullanıldığında yararlıdır: animation-direction özelliği (sonra ele alınacaktır), çünkü yalnızca baştan çalışan bir animasyon, birden çok kez çalışıyorsa çok kullanışlı değildir.

Etkisini görebilmeniz için yineleme sayısı için kesirli bir değer seçmenize izin veren aşağıdaki demoyu deneyebilirsiniz:

animasyon yönü özelliği

Bu CSS animasyonları eğitiminde yukarıda bahsedildiği gibi, animation-direction mülkiyet ile birlikte güzel çalışır animation-iteration-count. bu animation-direction özelliği, animasyonun hangi yönde oynatılması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ır (varsayılan)
• reverse – Animasyon ilk yinelemede geriye doğru oynatır
• alternate – Animasyon ilk yinelemede ileriye doğru oynatır, ardından sonraki yinelemelerde dönüşümlü olarak oynatılır
• alternate-reverse – İle aynı alternate ancak ilk yinelemede geriye doğru oynar

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

Animation-play-state özelliği

bu animation-play-state özelliği, statik bir CSS ortamında çok kullanışlı değildir, ancak JavaScript veya hatta CSS aracılığıyla etkileşimli olan animasyonlar yazarken kullanışlı olabilir.

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

.box {
  animation-direction: paused;
}

Varsayılan olarak, herhangi bir animasyon “çalışıyor” durumundadır. Ancak özelliğin değerini değiştirmek için JavaScript’i kullanabilirsiniz. Gibi etkileşimli bir CSS özelliğini bile kullanabilirsiniz. :hover veya :focus animasyonu “duraklatılmış” bir duruma değiştirmek için, bu da animasyonu geçerli yinelemede nerede olursa olsun dondurur.

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

animasyon gecikme özelliği

Bazı animasyonlar, animasyonu hemen başlatmak için tasarlanırken, diğerleri ilk yinelemeden önce hafif bir gecikmeden yararlanabilir. bu animation-delay özelliği bunu gerçekleştirmenize izin verir.

.box {
  animation-delay: 4s;
}

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

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

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

Bu özelliği kullanmanın ilginç bir yolu, negatif bir değer kullanmaktır. Örneğin, yukarıdaki demoyu kullanarak, animation-delay ile -0.5s. Negatif gecikmenin neredeyse bir zaman makinesinde ileriye gitmek gibi çalıştığını fark edeceksiniz – animasyon başlangıçta değil, yolun yarısında başlar.

Animation-fill-mode ö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 kullanılarak gerçekleştirilir animation-fill-mode.

.box {
  animation-fill-mode: forwards;
}

Bu özellik, bir animasyonun yürütmeden önce ve sonra hedeflenen öğeye stilleri nasıl uygulayacağını ayarlar. Bunu kavramsal olarak kavramak biraz zor, bu yüzden her bir değerin anlamını ele alacağım; ardından etkileşimli 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 uygulanmaz
• forwards – Animasyonun son anahtar karesinde uygulanan tüm stilleri korur
• backwards – Önceki değerin aşağı yukarı tersi, animasyona uygulanan stilleri yürütmeye başlar başlamaz, ancak animasyon başlamadan önce korur.
• both – Her ikisi için de stilleri korur forwards ve backwards

Bu CSS animasyonları öğreticisindeki son demo, işleri biraz daha netleştirecek, ancak bunun ne işe yaradığını ve nasıl başardığını gerçekten anlamadan önce bu demo üzerinde biraz oynama yapmanız gerekebilir.

Kolaylık sağlamak için, tüm demoları içine ekledim tek bir CodePen Koleksiyonu.

Demonun dolgu modunu, gecikmeyi, yönü ve yineleme sayısını ayarlamanıza izin verdiğini fark edeceksiniz çünkü bunların tümü görünüm üzerinde etkili olabilir. Ayrıca ilk anahtar karedeki animasyonlu kutuya farklı bir arka plan rengi ekledim, bu da yine dolgu modu değerlerinin biraz daha net olmasına yardımcı oluyor. Hala nasıl olduğunu anlamadıysanız animation-fill-mode çalışıyor bakabilirsin daha eski bir makale tartışılır diye yazdım animation-fill-mode derinlemesine.

Animasyon steno özelliği

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

Her bir özelliği iyice anladığınızda, animation tüm uzun el özelliklerini tek bir bildirimde tanımlamanıza izin veren steno özelliği.

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

Dürüst olmak gerekirse, bu tek bir satırda çok fazla bilgi var. Bildirim tüm özellikleri içermiyorsa, ancak yalnızca üç veya dört tanesini içeriyorsa, steno kullanmanızı tavsiye ederim.

Steno 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 anahtar kelime arasında bir çakışma varsa animation-nameanahtar kelime değeri, önce o görünüyorsa öncelikli olacaktır.
• Atlanan tüm değerler, herhangi bir CSS steno özelliğinde olduğu gibi ilk durumlarına geri döner.

Tek bir öğeye birden çok animasyon uygulama

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

İşte kısayolun kullanıldığı 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 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ğer içerdiğine dikkat edin. Bu örnekte, stenoyu okumak ve sürdürmek neredeyse kesinlikle daha kolay olacaktır.

Bu CSS animasyonları eğitimini tamamlıyoruz

👉 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.