CSS Keyframe Animasyonu Nasıl Oluşturulur?

Animasyon ayarlarını tanıma

CSS keyframe animasyonu oluştururken animasyonun adını, süresini, geçiş biçimini, yönünü ve dolgu modunu belirleyebilirsiniz. Bu araç, seçtiğiniz değerleri kullanarak bir keyframe animasyonu ile bir öğeye ait animasyon bildirimini içeren CSS metni üretir. Böylece görünürlük ve dikey hareket temelli hazır bir animasyon yapısını inceleyebilir, desteklenen ayarları kendi kullanım senaryonuza göre değiştirebilirsiniz.

Animasyon adını ve diğer alanları seçerken, üretilen bildirimin hangi değerleri taşımasını istediğinizi önceden düşünün. Örneğin bir panelin ortaya çıkmasını sağlamak için okunabilir bir ad, saniye cinsinden bir süre ve uygun bir geçiş biçimi seçebilirsiniz. Yön ile dolgu modu da bildirimin parçası olduğundan, bu iki alanı projenizdeki animasyon akışına göre değerlendirmek gerekir. Araç, desteklenen bu beş girişe odaklanır; farklı CSS özellikleri için sonuç metnini ayrıca düzenlemeniz gerekebilir.

Alanları doldurup CSS metnini alma

1. Animasyon adını belirleyin. Kullanmak istediğiniz adı ilgili alana girin ve yazımı daha sonra CSS metnindeki bildirimle karşılaştırın. Alanı boş olarak gönderirseniz araç bu değer için myAnimation adını kullanır. Alanı hiç belirtmezseniz varsayılan ad fadeIn olur; bu iki durum aynı değildir.

2. Süre değerini girin. Araç, girdiğiniz süreyi animasyon bildirimine saniye birimiyle ekler. Örneğin 2 değeri bildirimde 2s şeklinde görünür. Sürenin nasıl yazıldığını kontrol ederken, sonuçta birim eklenmiş biçimi arayın; araçta süre için doğrulama, sınırlandırma veya yuvarlama yapıldığına dair burada belirtilen bir davranış yoktur.

3. Geçiş biçimini seçin ya da girin. Bu alan boş bırakıldığında varsayılan değer ease olur. Ardından animasyon yönünü belirleyin; yön belirtilmezse normal kullanılır. Dolgu modunu da seçin veya girin; bu alanın varsayılanı none değeridir. Bu üç ayar, animasyon bildiriminin yapılandırılabilir parçalarıdır.

4. Girdi alanlarını gözden geçirip üretme işlemini başlatın. Başarılı bir sonuçta CSS metni içinde hem keyframe animasyonu hem de bir öğe için animasyon bildirimi bulunur. Önce bildirimin adını ve süresini, sonra geçiş biçimi, yön ve dolgu modu değerlerini kontrol edin.

5. Oluşturulan metni projenizde kullanmadan önce iki bölümü birlikte inceleyin. Keyframe bölümündeki ad ile animasyon bildirimindeki adın eşleşmesi, metnin hangi animasyonu çağırdığını anlamanıza yardımcı olur. Süreyi saniye birimiyle, diğer üç ayarı da seçtiğiniz değerlerle karşılaştırın. Boş bırakılmış bir alan beklenmedik bir varsayılan değer doğurmuşsa ilgili alanı açıkça doldurup sonucu yeniden üretin.

6. Sonucun sabit hareket yapısını ayrıca değerlendirin. Keyframe içeriğinde başlangıç ve bitiş olmak üzere iki aşama yer alır. Başlangıçta opaklık 0, dikey çeviri 20px; bitişte opaklık 1, dikey çeviri 0 olarak tanımlanır. Bu yapı, bir içeriğin görünür hâle gelirken dikey olarak hareket ettiği temel senaryoyu karşılar.

Üretilen yapıyı okuma

Sonucu yorumlarken CSS metnini yalnızca seçtiğiniz girişlerin listesi olarak değil, iki parçalı bir animasyon tanımı olarak okuyun. Keyframe bölümü hareketin hangi aşamalardan geçtiğini gösterir; animasyon bildirimi ise adı, süreyi, geçiş biçimini, yönü ve dolgu modunu bir araya getirir. Bu nedenle beklediğiniz hareketin görünürlük değişimiyle birlikte dikey çeviriyi içerip içermediğini keyframe bölümünden, zamanlama ve davranış ayarlarını ise bildirimden kontrol edin.

Başlangıçta opaklığın 0 olması içeriğin görünmez durumdan başlamasını, 20px dikey çeviri ise başlangıç konumunu ifade eder. Bitişte opaklığın 1 ve dikey çevirinin 0 olması, tanımlanan iki aşamanın görünür ve başlangıç çevirisi olmayan bir duruma ulaştığını gösterir. Bu değerler, aracın ürettiği sabit keyframe yapısının parçasıdır; özel aşamalar veya opaklık ile dikey çeviri dışındaki efektler için sonuç metnini kendiniz değiştirmeniz gerekir.

Bir alanı boş bırakmanın sonucu ile alanı hiç vermemenin sonucu farklı olabilir. Boş animasyon adı myAnimation ile değiştirilirken belirtilmeyen ad için fadeIn varsayılanı kullanılır. Diğer belirtilmeyen alanlarda sırasıyla 1, ease, normal ve none değerlerini göz önünde bulundurun. Böylece sonuçta gördüğünüz bir değerin bilinçli seçiminiz mi yoksa varsayılan davranış mı olduğunu ayırt edebilirsiniz.

Uygulamalı örnek

Bir panelin görünür olurken dikey olarak yukarı hareket etmesini istediğiniz için bu ayarlarla bir CSS animasyonu oluşturuyorsunuz.

Animasyon adını slideIn, süreyi 2, geçiş biçimini ease-out, yönü alternate ve dolgu modunu forwards olarak girerek CSS metnini üretin.

Sonuç CSS metninde @keyframes slideIn bölümü ve 2s ease-out alternate forwards değerlerini taşıyan bir animasyon bildirimi bulunur. Keyframe aşamalarında başlangıç için opaklık 0 ve dikey çeviri 20px, bitiş için opaklık 1 ve dikey çeviri 0 yer alır.

Sınırlamalar

• Üretilen keyframe içeriği iki sabit aşamayla sınırlıdır; belirtilen yapı opaklık ve dikey çeviriyi kullanır, özel aşamalar ya da başka efektler sunduğu doğrulanmamıştır.

Sık yapılan hatalar

• Ad alanını boş göndermek, beklenen özel ad yerine myAnimation kullanılmasına yol açabilir; alanın varsayılan olarak fadeIn olmasını istiyorsanız alanı hiç belirtmeyin, özel ad istiyorsanız boş olmayan bir değer girin.

Sık sorulan sorular

Animasyon adını boş bırakırsam ne olur?

Alan boş gönderilirse myAnimation adı kullanılır; ad alanı belirtilmezse fadeIn varsayılanı devreye girer.

Süre değerinin birimi nedir?

Girilen süre, animasyon bildiriminde saniye birimi eklenmiş biçimde gösterilir; 2 girdisi 2s olarak görünür.

Keyframe aşamalarını veya efektlerini değiştirebilir miyim?

Keyframe yapısı iki sabit aşama içerir ve değiştirilebilir aşamalar sunduğu belirtilmez; başlangıçta opaklık 0 ile dikey çeviri 20px, bitişte opaklık 1 ile dikey çeviri 0 kullanılır.