Geçiş - CSS Hileleri | CSS Almanak 2024

transitionÖzelliği, dört geçiş ilgili longhand özellikleri kadar temsil etmek için kullanılan bir kısa özelliğidir:

.example ( transition: (transition-property) (transition-duration) (transition-timing-function) (transition-delay); )

Bu geçiş özellikleri, öğelerin belirli bir süre boyunca değerleri değiştirmesine, hemen meydana gelmeleri yerine özellik değişikliklerini canlandırmasına izin verir. Burada, bir öğenin arka plan rengini geçiş yapan basit bir örnek : hover:

div ( transition: background-color 0.5s ease; background-color: red; ) div:hover ( background-color: green; )

Bu div, fare üzerindeyken kırmızıdan yeşile dönmesi yarım saniye sürer. İşte böyle bir geçişin canlı bir gösterimi:

CodePen'de Louis Lazaris (@impressivewebs) tarafından hazırlanan Kalem Geçiş Demosuna bakın.

Yukarıda sahip olduğumuz gibi belirli bir özelliği belirtebilir veya geçiş özelliklerine atıfta bulunmak için "tümü" değerini kullanabilirsiniz.

div ( transition: all 0.5s ease; background: red; padding: 10px; ) div:hover ( background: green; padding: 20px; )

Yukarıdaki örnekte, transition-propertysteno bölümü için belirtilen "tümü" değeri nedeniyle hem arka plan hem de dolgu geçişi olacaktır .

Farklı özelliklerde farklı geçişler yapmak için ayrı değer kümelerini virgülle kullanabilirsiniz:

div ( transition: background 0.2s ease, padding 0.8s linear; )

Çoğunlukla, değerlerin sırası önemli değildir - bir gecikme belirtilmediği sürece. Bir gecikme belirtirseniz, önce bir süre belirlemelisiniz. Tarayıcının geçerli bir zaman değeri olarak tanıdığı ilk değer her zaman süreyi temsil edecektir. Sonraki herhangi bir geçerli zaman değeri gecikme olarak ayrıştırılacaktır.

Canlandırılabilir özellikler olmadıklarından bazı özelliklerin geçişi yapılamaz. Hangi özelliklerin canlandırılabildiğinin tam listesi için spesifikasyona bakın.

Öğenin kendisinde geçişi belirterek, her iki yönde de gerçekleşecek geçişi tanımlarsınız. Yani, stiller değiştirildiğinde (örneğin üzerine gelindiğinde), özellikleri değişecek ve stiller geri değiştiğinde (örneğin üzerine gelindiğinde) geçiş yapacaklardır. Örneğin, aşağıdaki demo fareyle üzerine gelindiğinde geçiş yapar ancak fareyle üzerine gelindiğinde geçiş olmaz:

CodePen'de Louis Lazaris (@impressivewebs) tarafından hazırlanan Pen zohgt'a bakın.

Bunun nedeni, geçişin :hoverdurum seçiciye taşınması ve seçici üzerinde, :hoverdurumu olmadan öğeyi doğrudan hedefleyen eşleşen bir geçiş olmamasıdır .

Destekleyen tüm tarayıcılarda uyumluluk için, standart sözdiziminin en son bildirildiği satıcı önekleri gereklidir:

.example ( -webkit-transition: background-color 500ms ease-out 1s; -moz-transition: background-color 500ms ease-out 1s; -o-transition: background-color 500ms ease-out 1s; transition: background-color 500ms ease-out 1s; )

IE10 (IE'nin desteklenen ilk kararlı sürümü transition) -ms-ön ek gerektirmez .

Tarayıcı Desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.