Geçiş zamanlama işlevi - CSS Hileleri

İçindekiler:

transition-timing-functionNormal olarak bir parçası olarak kullanılan özellik, transitionkısaltma, bir geçiş süreci esnasında değiştirme hızının bir geçiş sağlayarak, süresi boyunca devam edecektir açıklamaktadır bir işlev tanımlamak için kullanılır.

.example ( transition-timing-function: ease-out; )

Bu zamanlama işlevlerine genel olarak hareket hızı işlevleri denir ve önceden tanımlanmış bir anahtar kelime değeri, adımlama işlevi veya kübik Bézier eğrisi kullanılarak tanımlanabilir.

İzin verilen önceden tanımlanmış anahtar kelime değerleri şunlardır:

kolaylaştırmak
doğrusal
kolaylık
rahatlama
kolay erişim
adım adım
adım sonu

Bazı değerler için, geçiş süresi daha büyük bir değere ayarlanmadıkça etki o kadar açık olmayabilir.

Önceden tanımlanmış anahtar kelimelerin her biri eşdeğer bir kübik Bézier eğrisi değerine veya eşdeğer adımlama işlevi değerine sahiptir. Örneğin, aşağıdaki iki zamanlama işlevi değeri birbirine eşdeğer olacaktır:

.example ( transition-timing-function: ease-out; ) .example-2 ( transition-timing-function: cubic-bezier(0, 0, 0.58, 1); )

Aşağıdaki ikisi gibi:

.example ( transition-timing-function: step-start; ) .example-2 ( transition-timing-function: steps(1, start); )

Adımları () ve Bézier eğrilerini kullanma

steps()İşlevi zamanlama fonksiyonu için aralıklarını belirlemek için izin verir. Virgülle ayrılmış bir veya iki parametre alır: pozitif bir tam sayı ve isteğe bağlı bir startveya veya değeri end. İkinci bir parametre dahil edilmemişse, varsayılan olacaktır end.

Adımlama işlevlerini anlamak steps(4, start)için, soldaki steps(4, end)kutu için ve sağdaki kutu için kullanılan bir demo (geçişleri görüntülemek için bir kutunun üzerine gelin veya çerçeveyi yeniden yükleyin):

Bu Kaleme bakın!

Zaman startbelirtilen ise, değişim değerleri, her bir aralığın başlama anında oluşturulur end, her zaman aralığı sonunda ortaya değerlerinin bir değişime yol açar.

Bézier eğri değerlerine ayrıntılı bir bakış, bu referansın kapsamı dışındadır, ancak bu değerlerin nasıl çalıştığını görsel olarak gösteren araçlar için ilgili bağlantılar bölümündeki referanslara bakın.

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

.example ( -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; )

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