Geçiş özelliği - CSS Hileleri

Anonim

transition-propertyNormalde bir parçası olarak kullanılan özellik, transitionkestirme ne mülk veya özelliklerini tanımlamak için kullanılır, sen bir geçiş efekti uygulamak istiyorum.

Bu, değer olarak mülkün adı sağlanarak yapılır:

.example ( transition-property: color; )

Değer aşağıdakilerden biri olabilir:

  • Yukarıdaki örnekte olduğu gibi tek bir mülk adı
  • Tek bir öğede birden çok özelliğin geçişini yapmak için özellik adlarının virgülle ayrılmış listesi (steno veya uzun)
  • noneHiçbir mülkün geçiş yapmayacağını belirten anahtar kelime
  • allTüm özelliklerin geçiş yapacağını belirten anahtar kelime (varsayılan)

Virgülle ayrılmış değerler ayırma, özellik adları esas tanımlanan diğer geçiş özelliklerine eşlenir ( transition-timing-function, transition-durationve transition-delay). Yani bu, virgülle ayrılmış bir özellikler listesi geçersiz olan bir veya daha fazla özellik adı içeriyorsa, diğer özelliklerin yine de geçiş yapacağı ve amaçlanan ilgili geçiş özellikleriyle eşleşeceği anlamına gelir.

Spesifikasyon bunu şöyle açıklar:

"(U) n tanınmayan veya canlandırılamayan özellikler, dizin eşleşmelerini korumak için listede tutulmalıdır."

Bir değeri noneveya evrensel anahtar sözcükler inheritveya kullanıldığında initial, bu değerler virgülle ayrılmış bir listenin parçası olarak kullanılamaz, aksi takdirde bu bir sözdizimi hatasıyla sonuçlanır ve tüm satır yok sayılır.

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

.example ( -webkit-transition-property: color; -moz-transition-property: color; -o-transition-property: color; transition-property: color; )

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

Tarayıcı Desteği

Krom Safari Firefox Opera IE Android iOS
İşler İşler 4+ 10.5+ 10+ 2.1+ 3.2+