- Konu sahibi
- #1
CSS
Önce bir animasyona isim verilir. Ardından
Burada tarayıcı
Yüzde değeri animasyonun zaman çizelgesindeki konumu belirtir. Örneğin
Aşağıdaki dosyayı bir HTML belgesine yerleştirerek doğrudan deneyebilirsiniz:
Beklenen sonuç, mavi karenin yatay olarak sağa hareket edip geri dönmesidir. Hiç hareket yoksa önce
Animasyonun davranışını şu özelliklerle kontrol edebilirsiniz:
Küçük bir vurgu veya geçiş için kısa süre ve sınırlı tekrar sayısı genellikle yeterlidir. Sürekli hareket eden dekoratif animasyonlar dikkat dağıtabileceği için bunları zorunlu içerik, uzun metin veya gezinme kontrollerinin üzerine uygulamamak daha uygundur. Kullanıcının işletim sisteminde hareket azaltma tercihi varsa animasyonu azaltmak veya kapatmak için
Evet. Aynı animasyon adı, farklı öğelere farklı süre, gecikme veya tekrar ayarlarıyla bağlanabilir. Animasyonun içindeki hareket değerleri ortak kalır; öğelerin başlangıç stilleri ise ayrı CSS kurallarıyla değiştirilebilir.
@keyframes, bir HTML öğesinin animasyon sırasında hangi ara durumlardan geçeceğini tanımlayan kuraldır. Başlangıç, bitiş ve istenirse aradaki yüzdeler belirlenir; animasyonun ne kadar süreceği, kaç kez tekrarlanacağı ve nasıl oynatılacağı ise genellikle animation veya animation-* özellikleriyle ayarlanır. @keyframes tek başına animasyonu çalıştırmaz; bir öğeye bağlanması gerekir.Nasıl çalışır?
Önce bir animasyona isim verilir. Ardından
from ve to ile başlangıç ve bitiş durumu tanımlanabilir:
Kod:
@keyframes kaydir {
from {
transform: translateX(0);
}
to {
transform: translateX(120px);
}
}
.kutu {
animation: kaydir 2s ease-in-out infinite alternate;
}Burada tarayıcı
kaydir adlı animasyonu oluşturur. .kutu öğesi iki saniyede 120 piksel sağa hareket eder, alternate sayesinde sonraki tekrarda sola döner ve infinite nedeniyle animasyon durmadan yinelenir.from ve to yerine yüzde değerleri kullanarak ara aşamalar ekleyebilirsiniz:
Kod:
@keyframes vurgu {
0% {
transform: scale(1);
opacity: 0.7;
}
50% {
transform: scale(1.08);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0.7;
}
}
.buton {
animation: vurgu 1.5s ease-in-out infinite;
}Yüzde değeri animasyonun zaman çizelgesindeki konumu belirtir. Örneğin
50%, toplam sürenin ortasındaki durumu ifade eder. Bir özellik her ara karede yazılmamışsa tarayıcı mümkün olduğunda belirtilmiş kareler arasında ara değer üretir. Her CSS özelliğinin aynı biçimde animasyon alamadığını ve başlangıç/bitiş stillerinin sonucu etkileyebileceğini hesaba katın.Çalışan en küçük örnek
Aşağıdaki dosyayı bir HTML belgesine yerleştirerek doğrudan deneyebilirsiniz:
Kod:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>Keyframes örneği</title>
<style>
.kutu {
width: 80px;
height: 80px;
background: steelblue;
animation: hareket 2s ease-in-out infinite alternate;
}
@keyframes hareket {
from {
transform: translateX(0);
}
to {
transform: translateX(180px);
}
}
</style>
</head>
<body>
<div class="kutu"></div>
</body>
</html>Beklenen sonuç, mavi karenin yatay olarak sağa hareket edip geri dönmesidir. Hiç hareket yoksa önce
animation özelliğindeki ismin @keyframes içindeki isimle aynı olduğunu kontrol edin. Yalnızca @keyframes yazılmış, ancak öğeye animation-name veya kısa animation özelliği eklenmemişse animasyonun görünmemesi normaldir.Animasyon kararlarını nasıl vermeli?
Animasyonun davranışını şu özelliklerle kontrol edebilirsiniz:
| Amaç | Özellik | Örnek değer |
|---|---|---|
| Süreyi belirlemek | animation-duration | 600ms |
| Tekrar sayısını belirlemek | animation-iteration-count | 3 veya infinite |
| Hareket eğrisini belirlemek | animation-timing-function | ease-in-out |
| Başlangıç gecikmesi eklemek | animation-delay | 200ms |
| Animasyon bitince durumu korumak | animation-fill-mode | forwards |
Küçük bir vurgu veya geçiş için kısa süre ve sınırlı tekrar sayısı genellikle yeterlidir. Sürekli hareket eden dekoratif animasyonlar dikkat dağıtabileceği için bunları zorunlu içerik, uzun metin veya gezinme kontrollerinin üzerine uygulamamak daha uygundur. Kullanıcının işletim sisteminde hareket azaltma tercihi varsa animasyonu azaltmak veya kapatmak için
prefers-reduced-motion sorgusu kullanılabilir:
Kod:
@media (prefers-reduced-motion: reduce) {
.kutu, .buton {
animation: none;
}
}Sık yapılan hatalar
-
@keyframesadını öğedekianimation-namedeğerinden farklı yazmak. İki ad karakter bakımından aynı olmalıdır. - Animasyon süresini belirtmemek.
animation-durationveya kısaanimationiçinde süre verilmezse animasyonun görünür biçimde çalışmaması beklenebilir. - Her şeyi
leftvetopile hareket ettirmek. Basit görsel hareketlerdetransform: translate()kullanmak genellikle daha uygun bir başlangıçtır; ancak düzen akışını veya gerçek yerleşimi değiştirmek istiyorsanız bu seçimin sonucunu ayrıca değerlendirin. - Animasyonun son durumunu kalıcı sanmak. Varsayılan davranışta öğe animasyon bitince normal stiline dönebilir; bitiş durumunu korumak için uygun bir
animation-fill-modeseçin. - Hareketi içerik yerine koymak. Önemli bilgi yalnızca animasyonla gösterilmemeli; animasyon çalışmasa da içerik anlaşılabilir kalmalıdır.
Kaynaklar
Sık sorulan sorular
@keyframes ile transition arasındaki temel fark nedir?
transition genellikle bir özellik değeri değiştiğinde başlangıçtan hedefe geçiş yapar. @keyframes ise birden fazla ara aşamayı, tekrar sayısını, gecikmeyi ve oynatma yönünü tanımlayabildiğiniz bağımsız bir animasyon akışı sağlar.Bir @keyframes kuralı birden fazla öğede kullanılabilir mi?
Evet. Aynı animasyon adı, farklı öğelere farklı süre, gecikme veya tekrar ayarlarıyla bağlanabilir. Animasyonun içindeki hareket değerleri ortak kalır; öğelerin başlangıç stilleri ise ayrı CSS kurallarıyla değiştirilebilir.
Animasyonu yalnızca bir kez çalıştırmak için ne yapmalıyım?
animation-iteration-count: 1; kullanın veya kısa gösterimde animation kısaltmasının içinde tekrar sayısı vermeyin. Animasyon bittikten sonra son görünümün korunması gerekiyorsa ayrıca animation-fill-mode: forwards; değerlendirilmelidir.