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
Henüz yorum yok.