Hareketleri yumuşatarak web sitesine "akıcılık" katmak
Bir CSS özelliğinin (renk, boyut, konum vb.) bir değerden diğerine "aniden" değil, belirli bir süre içinde "yumuşayarak" geçmesini sağlar. Bu, kullanıcı deneyimi açısından çok daha doğal bir his uyandırır.
Aşağıdaki kartların üzerine gelerek farklı transition etkilerini görebilirsiniz:
Hangi özelliğin, ne kadar sürede ve hangi hız eğrisiyle gerçekleşeceğini tek satırda tanımlayabilirsiniz.
/* property | duration | timing-function | delay */
transition: all 0.3s ease-in-out;
/* Performans için önerilir */
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
opacity 0.3s ease;