--- title: "Keyframe nedir?" author: Androverse author_url: https://androverse.com.tr/yazar/androverse publisher: Androverse updated_at: 2026-10-15 url: https://androverse.com.tr/sozluk/keyframe language: tr --- # Keyframe nedir? Keyframe, bir animasyonda belirli bir andaki özellik değerlerini tanımlayan anahtar karedir. Diğer adlar: Anahtar kare. ## Nerede işine yarar? Konum, ölçek veya opaklık gibi özellikler anahtar anlarda belirlenir; aradaki geçiş seçilen yöntemle hesaplanır. Hareketin anlamlı noktalarını kurmak, her kareyi ayrı çizmekten farklıdır. Zaman çizelgesinde öğeler arası ilişki de kontrol edilir. ## Bir cümlede uygulaması Bir başlığın başlangıçta görünmez, kısa bir süre sonra tam görünür olmasını iki anahtar anla tanımlamak. ## Neyle karıştırılmamalı? Her video karesi keyframe değildir; terim animasyon ve video sıkıştırmada farklı bağlamlarda kullanılır. ## Hareketin tamamını değil, karar anlarını çiz Bir ürün kartının detay paneline dönüştüğünü düşün. Başlangıçta küçük bir kapak ve başlık var; sonunda geniş görsel, açıklama ve seçenekler görünüyor. Her aradaki kareyi elle çizmek yerine belirli anların özelliklerini tanımlayabilirsin. Kartın başlangıç ölçüsü, ara aşamada görselin konumu ve finalde metnin görünürlüğü birer keyframe kararıdır. Sistem, tanımlanan anlar arasındaki uygun değerleri hesaplayabilir. Keyframe kavramını yalnız video düzenleme programındaki küçük elmas işaretine indirgememek gerekir; o işaret bir zaman noktasına bağlanmış özellik bilgisini temsil eder. Önemli soru hangi özelliklerin aynı anda değişeceğidir. Görsel büyürken başlığın yeri değişebilir, açıklama daha sonra görünür hale gelebilir. Hepsini aynı başlangıç ve bitiş anına koymak okunurluğu zorlaştırabilir. Buna karşılık her kelime için ayrı keyframe eklemek yönetimi gereksiz yere ağırlaştırır. Önce ana durumlar seçilir: seçim yapıldı, detay alanı yerleşti, ek bilgi okunabilir. Animasyonun bu anları anlaşılır biçimde bağlaması hedeflenir. Keyframe sayısı arttıkça anlatımın otomatik iyileştiği varsayılmaz; bazen birkaç iyi karar onlarca küçük düzeltmeden daha temiz sonuç verir. Bir özelliğin zaman içinde nasıl değişeceği, hangi araçta çalışıldığına bağlı olarak farklı seçenekler sunabilir. Konum gibi sayısal değerlerde ara değerler oluşturulabilir; bazı özelliklerde ise kesikli geçiş veya ayrı bir görünürlük kararı gerekir. Bu yüzden tasarım dosyasında çalışan bir davranışın tarayıcıda aynı şekilde uygulanacağını varsaymamak önemlidir. Üretim ortamının desteklediği özellikler öğrenilir. Tasarımcı ve geliştirici yalnız son videoyu değil, başlangıç ve bitiş durumlarını da paylaşır. Böylece hareket, belirli bir aracın kaydı olmaktan çıkar ve uygulanabilir bir davranış tarifine dönüşür. Zaman çizgisinde sonradan yapılan bir değişiklik bağlı öğeleri etkileyebilir. Bir ürün görüntüsünün süresi uzatılırken başlığın çıkışı aynı yerde kalırsa anlatı bozulabilir. Bu nedenle hangi keyframe’lerin birlikte taşınacağı ve hangilerinin bağımsız olduğu düşünülür. Arayüzde de benzer bir bağımlılık vardır: panel daha açılmadan tıklanabilir alanın etkinleşmesi veya kapandıktan sonra görünmez bir kontrolün odak alması istenmez. Görsel zamanlama ile etkileşim durumu uyumlu olmalıdır. Son anahtar kare yalnız ekranda görülen resmi değil, o anda kullanıcıya sunulan işlevi de karşılamalıdır. Keyframe düzenlerken görünür nesnenin referans noktasını da düşünmek gerekir. Ortasından büyüyen kartla bir köşesine bağlı büyüyen kart aynı yolculuğu hissettirmez. Tasarımda seçilen referans, uygulamadaki yerleşimle tutarlı olmalıdır. Ekran boyutu değiştiğinde sabit koordinatlar anlamını yitiriyorsa hareketi yeni konuma göre tanımlamak gerekir. Böylece anahtar kareler yalnız belirli bir ekran görüntüsüne değil, bileşenin yerleşim davranışına bağlanır. Bu ayrım özellikle farklı cihazlara taşınan arayüz hareketlerinde bakım işini kolaylaştırır. ### Başlangıç ve son Hareket başlamadan önce ve tamamlandıktan sonra kararlı durumları tanımla. Ölçü, konum, saydamlık gibi özelliklerin hangilerinin gerçekten değişeceğini seç. Aynı özelliğin farklı yerlerden aynı anda yönetilmesi beklenmedik sıçramalara yol açabileceği için sorumluluğu açık tut. ### Ara karar Bir ara keyframe eklemek için neden ara. Nesnenin bir engelden geçmesi, önemli bir durak veya görünürlüğün aşamalı değişmesi anlamlı gerekçeler olabilir. Çizgide daha çok işaret bulunması tek başına daha ayrıntılı veya daha iyi tasarım anlamına gelmez. ### Kesinti Kullanıcı hareket tamamlanmadan yeni bir işlem başlatırsa hangi durum geçerli olacak? Animasyonun başlamasını sağlayan koşul ortadan kalktığında nesne görünmez kalmamalı. Yeniden başlatma, mevcut konumdan devam ve anında son duruma geçme farklı kararlardır; kullanım bağlamına göre seçilir. ## Anahtar kareyle video karesi aynı şey değil ### Her görüntü bir kare Videoyu durdurduğunda gördüğün kare, zamanın o anındaki bütün görüntüdür. İçinde birçok öğenin hesaplanmış veya kaydedilmiş konumu bulunabilir. Her görüntü karesi bir tasarım kararı olarak ayrıca işaretlenmiş olmayabilir. Bir animasyonun çok sayıda video karesi üretmesi, aynı sayıda keyframe kullanıldığı anlamına gelmez. ### Özelliğe bağlı anahtar an Keyframe belirli bir zamanda bir veya birkaç özelliğin değerini tanımlar. Aradaki görüntüler, aracın yöntemine ve seçilen geçişe göre oluşur. Başlangıç ile son arasına yalnız bir ara konum eklemek bile yolu değiştirebilir. Bu ayrım, dosyada hangi değerleri düzenleyeceğini ve hareketi nasıl başka bir ortama aktaracağını anlamayı kolaylaştırır. ## Ana anlar arasındaki ilişki Keyframe yalnız nesnenin bulunduğu yeri değil, ilgili anda hangi değere sahip olduğunu belirler. Ara değerlerin nasıl üretileceği hareketin hissini değiştirir. Döngüde ilk ve son görüntünün eşleşmesi kadar hızın da birleşme noktasında tutarlı olması gerekir. - Önce hareketin başlangıç, vurgu ve bitiş anlarını seç. - Konum, ölçek ve opaklığı gereksiz yere birlikte değiştirme. - Döngüyü birkaç kez izleyip duraklama veya sıçrama ara. ## Daha çok keyframe daha iyi sonuç verir mi? Her zaman değil. Fazla anahtar kare düzeltmeyi zorlaştırabilir ve istenmeyen hız değişimleri oluşturabilir. Az sayıda anlamlı anla başlayıp yalnız gerekli kontrol noktalarını eklemek daha yönetilebilir bir akış sağlar. ## Bu karar, işinin neresinde? Keyframe kavramının bir projede nasıl ele alındığını; yaklaşım, süreç ve teslimler üzerinden incele. [Video & motion](https://androverse.com.tr/hizmetler/video-motion) ## Karar masası ### Keyframe ile easing arasındaki ilişki nedir? Keyframe hangi zamanda hangi değere ulaşılacağını; easing bu değerler arasında ilerlemenin karakterini anlatır. Aynı anahtar kareler farklı eğrilerle farklı hissedebilir. Bu yüzden hareketi tarif ederken yalnız konumları veya yalnız süreyi vermek eksik kalabilir. Ara değerlerin nasıl dağıldığı da özellikle hızlı giriş ve yumuşak duruş gibi davranışlarda önemlidir. ### Her geçiş için keyframe yazmak gerekir mi? Hayır. Basit iki durumlu bir değişim, kullanılan ortama göre daha kısa bir geçiş tanımıyla çözülebilir. Birden fazla ara durak, farklı özelliklerin ayrı zamanlaması veya tekrar eden bir desen gerektiğinde keyframe daha açıklayıcı olabilir. Araç seçimi, hareketin karmaşıklığından önce davranışın gereksinimine göre yapılır; aynı işi gereksiz yere uzun kodla anlatmak hedef değildir. ### Anahtar kare sayısını azaltmak her zaman iyi mi? Hayır. Gereken ara bilgiyi kaldırmak hareketin şeklini bozabilir. Amaç az ya da çok sayıya ulaşmak değil, her anahtar anın bir gerekçesinin olmasıdır. Özellikle gerçek görüntüde yapılan maskeleme ve takip çalışmalarında ayrıntılı kontrol gerekebilir. Bir arayüz paneliyle karmaşık bir karakter hareketinin aynı sadeleştirme ölçütüne tabi tutulması doğru olmaz. ## Bir hareketin karar haritasını çıkar Kurgusal bir ürün kartını açılan detay görünümüne dönüştür. Uygulama yapmadan önce üç kararlı görüntü seç ve her birinde neyin değiştiğini yaz. Bu çalışma, hareketin teknik ayrıntısını yaratıcı amacından koparmamayı öğretir. - [ ] İlk ve son görünümü yan yana yerleştir. Nesnenin boyutunu, konumunu ve metnin görünürlüğünü karşılaştır. Değişmeyen özellikleri ayrıca işaretle; hareket boyunca sabit kalan öğeler izleyiciye referans noktası sağlar ve düzenin nereden nereye gittiğini anlatır. - [ ] Araya yalnız anlamlı bir durak ekle. Örneğin kart yerleştikten sonra ayrıntı metninin açılması. Her özelliğin hangi aralıkta değiştiğini not et. Metin hareketin tamamını beklemeden okunabiliyorsa gereksiz gecikmeyi kaldır; görsel koreografiyi bilgiye erişimin önüne koyma. - [ ] Kapatmayı ve yarıda vazgeçmeyi aynı çizime ekle. Açılma sürerken yeniden tıklandığında başlangıca sıçramak yerine nasıl karşılık verileceğini düşün. Sonra hareketi tamamen kaldırılmış sürümde kontrol et: başlangıç ve son durum hâlâ bütün gerekli bilgiyi taşımalıdır. Keyframe, animasyonun içindeki karar noktasıdır. Hangi özelliğin ne zaman ve neden değiştiğini açıkça tanımladığında hareket daha kolay düzenlenir, farklı araçlara aktarılır ve etkileşimli kullanımda daha tutarlı kalır. ## Bağlantılı kavramlar - [Easing](https://androverse.com.tr/sozluk/easing) — Easing, bir animasyonun zaman boyunca ilerleme hızının nasıl değişeceğini belirleyen eğridir. - [Motion design](https://androverse.com.tr/sozluk/motion-design) — Motion design, grafik öğelerin zaman, hareket ve ritim üzerinden anlam taşımasını tasarlamaktır. - [Kurgu](https://androverse.com.tr/sozluk/kurgu) — Kurgu, görüntü ve ses parçalarının seçilerek zaman içinde anlamlı bir sıraya ve ritme yerleştirilmesidir. ## Konuyu uygulamaya taşı - [Video & motion](https://androverse.com.tr/hizmetler/video-motion) — Keyframe kavramının bir projede nasıl ele alındığını; yaklaşım, süreç ve teslimler üzerinden incele. - [Her şey hareketli. Peki göz nereye?](https://androverse.com.tr/blog/her-sey-hareketli-peki-goz-nereye) — Keyframe ile ilgili tasarım kararını Androverse’nin uygulama örnekleri ve değerlendirme sorularıyla birlikte düşün. ## Kaynaklar - [MDN — Keyframe biçimleri](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats) [Androverse profili](https://androverse.com.tr/yazar/androverse) · [Yayın ilkeleri](https://androverse.com.tr/yayin-ilkeleri)