Daha İyi CSS Geçişleri ve Animasyonları İçin İpuçları

Düşündüğünüzden daha kısa tutun

• Tek bir geçiş için 0.15~0.4 saniye
• Fazla hızlı geldiğini düşüneceğiniz noktaya kadar hızlandırın, sonra biraz biraz geri alın

Aksiyonu eğriye uydurun

• Hareket de renk kadar öznel ama en az onun kadar önemli
• Gerçek dünyadaki hareketi düşünün ve onunla karşılaştırın

Hızlanma ve yavaşlama

• Animasyon doğal görünmüyorsa, nedeni aniden başlaması ya da bitmesidir
• Çok hafif olsa bile cubic-bezier eğrisine easing-in/out eklemek iyidir
• Daha gerçekçi görünmesi için "atalet (inertia)" de işe yarar

Az, daha iyidir

• Animasyon sırasında bir elementte ne kadar çok şey değişirse, o kadar abartılı görünme riski artar
• Opaklık 0'dan 1'e gidiyorsa 1 yerine 0.4'ü deneyin. Boyutu değiştiriyorsanız, biraz daha küçük bir boyuttan başlamayı deneyin
• Çoğu durumda bir elementin yerine oturduğu animasyonlar 5~40 piksel aralığında hareket etmelidir

Tarayıcı varsayılanlarından kaçının

• Tarayıcılarda linear, ease, ease-in, ease-out, ease-in-out gibi yerleşik eğriler vardır
• Rahattırlar ve bazı durumlarda kullanışlıdırlar, ama fazla genel oldukları için her şey aynı görünür (tıpkı Bootstrap/Tailwind ile yapılmış sitelerin birbirine benzemesi gibi)
• VS Code içindeki cubic-bezier eğrisi otomatik tamamlama değerlerini deneyin
• Ya da tarayıcı geliştirici araçlarını açıp eğri düzenleyicisini kullanın

Birden fazla özellik, birden fazla easing

• Her zaman gerekli değildir, ama birden fazla özelliği aynı anda değiştirmeniz gerektiğinde (transform ve opacity gibi)
  • Aynı cubic-bezier eğrisini uygulamak bazen iyi görünebilir, ama pratikte her zaman öyle olmayabilir
  • transform için iyi çalışan bir eğri, fade için o kadar uygun olmayabilir
  • Böyle durumlarda CSS özelliğine göre farklı easing seçmek daha iyidir
• Özelliklere göre @keyframes animasyonlarını ayırabilir ya da birden fazla transition tanımlayabilirsiniz
  • opacity için linear, transform için cubic-bezier(.5, 0, .5, 1)

Kademeli gecikme kullanın

• Birden fazla elementi geçişe sokarken animation-delay veya transition-delay etkisini küçümsemeyin

In dışarı çıkar, Out içeri girer

• Easing eğrilerinin üç türü vardır
  • ease in (yavaş başlar)
  • ease out (yavaş biter)
  • in-out (yalnızca ortası hızlıdır, başta ve sonda yavaştır)
• Geçişlerin zor tarafı şu ki, bazen in için ease-out, out için ise ease-in isteyebilirsiniz
  • Biri çıkarken diğerinin girdiği animasyonlar kullanıcı açısından tek bir geçiş gibi görünür, ama içeride aslında iki ayrı geçiş vardır
  • Çıkan şeyin yavaşça gitmesini istediğiniz için ease-in gerekir, giren şeyin ise ease-out olması gerekir

Donanım hızlandırmasına güvenin

• Tüm CSS özellikleri her cihaz ve tarayıcıda akıcı çalışmaz
• Her zaman donanım hızlandırmalı çalışabilen özellikler
  • transform (tüm translate, scale, rotate ve 3D sürümleri dahil)
  • opacity
• Bazı durumlarda donanım hızlandırmalı olabilen özellikler
  • bazı SVG özellikleri
  • filter (tarayıcıya ve filtreye bağlı olarak)
• Canvas ve WebGL de donanım hızlandırmalıdır, ama burada ele alınmıyor
• Yani taşıma, yeniden boyutlandırma ve döndürme için her zaman CSS transform özelliğini kullanın
• Ne yaparsanız yapın, elementin boyutunu ya da konumunu doğrudan değiştirmeyin
  • height, width, border, margin, padding gibi sayfa yerleşimini etkileyen özellikleri doğrudan değiştirirseniz, sayfa hızının fark edilir biçimde yavaşlama riski vardır

Gerektiğinde will-change kullanın

• Teoride animasyon akıcı ve performanslı olması gerekirken doğal görünmüyorsa will-change özelliğini kullanın
• Ne değişeceğini önceden bildirdiği için, bazı başka hesaplamalar atlanabilir

Bonus: kullanıcının tercihine saygı gösterin

• Kullanıcılar cihaz ayarlarında "reduced motion" tercih ettiklerini belirtebilir
• Media query kullanarak ya da JavaScript üzerinden bu değeri algılayıp buna uygun davranabilirsiniz