CSS Transition Rehberi

Transition Nedir?

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.

İnteraktif Deneyler

Aşağıdaki kartların üzerine gelerek farklı transition etkilerini görebilirsiniz:

Arka Plan

Yükselme (Lift)

Yuvarlaklaşma

Dönme & Büyüme

Sözdizimi (Syntax)

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;

/* Sadece belirli özellikleri hedeflemek isterseniz (Performans için önerilir) */
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
            opacity 0.3s ease;
            

Zamanlama Fonksiyonları (Timing Functions)

linear: Sabit hız. Robotik bir his verir.
ease: Yavaş başlar, hızlanır, yavaş biter. (En doğal olanıdır).
ease-in: Yavaş başlar, hızlanarak biter.
ease-out: Hızlı başlar, yavaşlayarak biter.
cubic-bezier: Kendi hız eğrinizi oluşturmanıza yarar. Sıçrama (bounce) efektleri için kullanılır.

Performans İpucu

Tarayıcılar için transform (translate, scale, rotate) ve opacity özelliklerini canlandırmak, top, left, margin, width, height gibi genişliği/konumu doğrudan etkileyen özellikleri canlandırmaktan çok daha hızlıdır (GPU hızlandırması kullanır). Mümkün olduğunca transform kullanmaya çalışın!

CSS Transitions (Geçişler)

Transition Nedir?

İnteraktif Deneyler

Sözdizimi (Syntax)

Zamanlama Fonksiyonları (Timing Functions)

Performans İpucu