Siirdeaja funktsioon - CSS-trikid

transition-timing-functionVara, tavaliselt kasutatakse osana transitionstenografist, saab määrata funktsiooni, mis kirjeldab, kuidas üleminekut jätkab üle selle kestus, mis võimaldab ülemineku ajal kiirust muuta oma muidugi.

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

Neid ajastamisfunktsioone nimetatakse tavaliselt leevendusfunktsioonideks ja neid saab määratleda ettemääratud märksõna väärtuse, astmelise funktsiooni või kuupmeetri Bézieri kõvera abil.

Lubatud on eelmääratud märksõna väärtused:

kergust
lineaarne
lihtsus sisse
lihtsus välja
lihtsus sisse-välja
samm-algus
samm-ots

Mõne väärtuse puhul ei pruugi mõju olla nii ilmne, kui ülemineku kestus ei ole suurem.

Igal eelnevalt määratletud märksõnal on samaväärne kuupmeetri Bézieri kõvera väärtus või samaväärne astumisfunktsiooni väärtus. Näiteks järgmised kaks ajastamisfunktsiooni väärtust oleksid üksteisega samaväärsed:

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

Nagu ka järgmised kaks:

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

Kasutades samme () ja Bézieri kõveraid

steps()Funktsioon võimaldab teil määrata intervalle ajanäitamisfunktsioon. Selleks on vaja ühte või kahte komaga eraldatud parameetrit: positiivne täisarv ja valikuline väärtus kas startvõi end. Kui teist parameetrit pole lisatud, on see vaikimisi väärtus end.

Astumisfunktsioonide mõistmiseks on siin demo, mida kasutatakse steps(4, start)vasakul steps(4, end)asuvas kastis ja paremal asuvas kastis (üleminekute kuvamiseks hõljutage kursorit kasti kohal või laadige raam uuesti):

Vaadake seda pliiatsit!

Kui see starton määratud, toimub väärtuste muutus iga intervalli alguses, samal ajal endkui väärtuste muutus toimub iga intervalli lõpus.

Bézieri kõvera väärtuste üksikasjalik ülevaade jääb selle viite reguleerimisalast välja, kuid vaadake seotud linkide jaotise viiteid tööriistade jaoks, mis näitavad visuaalselt, kuidas need väärtused toimivad.

Kõigi toetavate brauserite ühilduvuseks on vaja hankija eesliiteid, kusjuures viimane süntaks on deklareeritud viimasena:

.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 esimene stabiilne versioon, mida toetada transition-timing-function) ei vaja -ms-eesliidet.