Funcție-temporizare-tranziție - CSS-Tricks

transition-timing-functionProprietatea, utilizată în mod normal , ca parte a transitionstenografie, este folosit pentru a defini o funcție care descrie modul în care o tranziție va trece peste durata acesteia, care să permită o tranziție la viteza de schimbare în timpul cursului său.

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

Aceste funcții de sincronizare sunt denumite în mod obișnuit funcții de relaxare și pot fi definite folosind o valoare predefinită a cuvântului cheie, o funcție pas cu pas sau o curbă cubică Bézier.

Valorile predefinite ale cuvintelor cheie permise sunt:

uşura
liniar
ușurință
relaxare
ușurință-în-ieșire
start-step
pas-capăt

Pentru unele valori, efectul poate să nu fie la fel de evident, cu excepția cazului în care durata tranziției este setată la o valoare mai mare.

Fiecare dintre cuvintele cheie predefinite are o valoare echivalentă a curbei Bézier cubice sau o valoare echivalentă a funcției de pas. De exemplu, următoarele două valori ale funcției de sincronizare ar fi echivalente una cu cealaltă:

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

La fel ca următoarele două:

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

Folosind pași () și curbe Bézier

steps()Funcția vă permite să specificați intervalele pentru funcția de sincronizare. Este nevoie de unul sau doi parametri, separați printr-o virgulă: un număr întreg pozitiv și o valoare opțională a oricărui startsau end. Dacă nu este inclus al doilea parametru, acesta va fi implicit end.

Pentru a înțelege funcțiile de pas, iată o demonstrație care se folosește steps(4, start)pentru caseta din stânga și steps(4, end)pentru caseta din dreapta (plasați cursorul peste o casetă sau reîncărcați cadrul pentru a vizualiza tranzițiile):

Verificați acest stilou!

Când starteste specificat, schimbarea valorilor are loc la începutul fiecărui interval, în timp ce endface ca schimbarea valorilor să aibă loc la sfârșitul fiecărui interval.

O privire detaliată asupra valorilor curbei Bézier depășește sfera acestei referințe, totuși consultați referințele din secțiunea de legături aferente pentru instrumente care demonstrează vizual modul în care funcționează aceste valori.

Pentru compatibilitate în toate browserele compatibile, sunt necesare prefixele furnizorului, cu sintaxa standard declarată ultima:

.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 (prima versiune stabilă de IE care acceptă transition-timing-function) nu necesită -ms-prefixul.