Keyframe Nedir?
Animasyon, video düzenleme, grafik tasarımı ve film yapımında önemli bir terim olan keyframe (anahtar kare), hareketli bir görüntü ya da sahneye anlam ve geçiş ekleyen temel çerçevelerdir. Keyframe, bir animasyon ya da video sırasındaki belirli bir anı temsil eder ve diğer karelerle olan geçişleri tanımlar. Bu sayede bir animasyonun ya da hareketli görüntünün zaman içinde nasıl değişeceği ve evrileceği kontrol edilebilir.
Keyframe’in Temel Özellikleri
Keyframe'ler, animasyonların temeli olarak kabul edilir. Bir animatör, hareketli bir nesne, karakter veya grafik öğesi üzerinde istediği bir noktada bir keyframe belirler. Diğer kareler, keyframe arasında geçen geçişleri oluşturacak şekilde otomatik olarak oluşturulabilir. Örneğin, bir karakterin bir yere doğru koşarken keyframe'leri, başlangıç noktasındaki pozisyonu ve bitiş noktasındaki pozisyonu temsil edebilir.
Keyframe'lerin en temel özellikleri şunlardır:
Zamanlamayı Belirler: Bir animasyonun ya da videonun hangi hızda ve nasıl bir tempo ile ilerleyeceğini keyframe'ler belirler.
Geçişi Kontrol Eder: Bir keyframe’den diğerine geçiş, animasyonun akışını sağlamak için önemli bir unsurdur. Geçişlerin doğru yapılması animasyonun doğal ve akıcı olmasını sağlar.
Hareketi Tanımlar: Keyframe, bir nesnenin, karakterin veya grafik öğesinin konumunu, boyutunu, rengini veya diğer özelliklerini belirleyebilir.
CSS keyframe kullanarak basit bir animasyon örneği yapalım. Bu örnekte, bir kutuyu soldan sağa hareket ettirirken, aynı zamanda rengini değiştireceğiz.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Keyframe Animasyonu</title>
<style>
/* Kutunun temel stilini ayarlayalım */
.moving-box {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
animation: moveAndChangeColor 5s infinite; /* Animasyonu uyguluyoruz */
}
/* Keyframe animasyonu */
@keyframes moveAndChangeColor {
0% {
left: 0;
background-color: blue;
}
50% {
left: 200px;
background-color: green;
}
100% {
left: 0;
background-color: red;
}
}
</style>
</head>
<body>
<div class="moving-box"></div>
</body>
</html>
Açıklamalar:
.moving-box: Bu, animasyon yapılacak kutunun stilini tanımlar. Kutunun boyutunu, rengini ve başlangıçta position: relative ile konumunu ayarlıyoruz.
@keyframes moveAndChangeColor: Bu CSS keyframe animasyonu, kutunun başlangıçta mavi renkte olup, 5 saniyelik bir süreyle soldan sağa hareket etmesini sağlar. Animasyonun ortasında kutu yeşil renge döner ve sağa doğru hareket eder. Sonra, kutu eski yerine geri döner ve kırmızıya döner.
animation: moveAndChangeColor 5s infinite: Bu satırda, moveAndChangeColor animasyonunu kutuya uyguluyoruz. Animasyon 5 saniye sürecek ve sonsuz kez tekrarlanacaktır.
Sonuç:
Bu animasyon, kutuyu soldan sağa hareket ettirirken renk değişimlerini gösterir. İlk başta mavi, sonra yeşil, ardından kırmızı olur ve animasyon sonsuz döngüde devam eder.