CSS @keyframes Nedir?
Video düzenleme, animasyon ya da CSS ‘te animasyon yapmak için uğraşan herkesin karşılaştığı bir terim: keyframe. Peki bu tam olarak ne demek? Ne işe yarar? Hangi alanlarda karşımıza çıkar?
Bu yazıda, teknik terimlere boğulmadan, örneklerle ve sade dille keyframe (anahtar kare) kavramını öğrenmeye çalışacağız.
Keyframe Nedir?
Keyframe (anahtar kare), bir animasyonun başlangıç, bitiş veya önemli anlarını belirten karelerdir. Yani bir nesneye “buradan buraya hareket et” demenin yoludur. Sen sadece başı ve sonu belirlersin. Aradaki kareleri sistem otomatik hesaplar. Bu işleme interpolasyon denir.
Nerelerde Kullanılır?
1. Video ve Animasyon Yazılımları
After Effects, Premiere Pro, Blender gibi araçlarda konum, opaklık, döndürme gibi hareketler keyframe’lerle tanımlanır.
2. CSS ile Web Animasyonları
Bir butonun büyümesi ya da bir div’in kayması gibi geçişler @keyframes ile yapılır.
3. 2D/3D Animasyon ve Oyun Geliştirme
Karakter hareketleri, kamera geçişleri veya çevre efektleri keyframe’lerle kontrol edilir.
4. Motion Grafikler
Tipografi efektleri, logo hareketleri veya geçişler bu teknikle hazırlanır.
Nasıl Çalışır?
Keyframe, bir öğenin zaman içindeki değişimini tanımlar. Örneğin bir kutunun 0. saniyede solda, 3. saniyede sağda olmasını istiyorsan bu iki noktaya keyframe eklersin. Sistem, ara kareleri otomatik olarak oluşturur.
Bu sadece konum için geçerli değildir. Renk, opaklık, boyut, döndürme gibi birçok özellik için de kullanılabilir. Örneğin; opaklığı artırmak istiyorsan, 0. saniyede opacity: 0, 1. saniyede opacity: 1 tanımlarsın. Sistem, bu geçişi yumuşak bir şekilde uygular.
Yukarıdaki örnekte .kutu sınıfına sahip öğe sağa doğru kayar ve opaklığı artar. ease-in-out efekti, hareketin başını ve sonunu yavaşlatır. forwards sayesinde animasyon bittiğinde son durum korunur.
Neden Bilmeliyim?
Keyframe’leri bilmek, sadece teknik bir bilgi değildir. bu bilgiyi kullanarak daha canlı, etkileşimli ve modern arayüzler tasarlarsın. Bir sayfa geçişi, yükleme animasyonu veya buton efekti gibi detaylar, kullanıcı deneyimini büyük ölçüde geliştirir. Özellikle günümüz web sitelerinde hareketlilik fark yaratı
Sonuç Olarak
Keyframe mantığı ilk başta karmaşık görünsede aslında bir öğenin nereden nereye, nasıl geçeceğini tanımlamak yeterlidir. Geri kalan işi sistem senin için yapar. Bu da hem zamandan kazandırır hem de profesyonel bir görünüm sağlar.
