Funkcja-czasu przejścia - CSS-Tricks

transition-timing-functionWłaściwość zwykle stosowane jako część transitionskrót stosowany jest do określenia funkcji, która opisuje jak przejściowy prowadzono przez czas jego trwania, dzięki czemu przejście do zmiany prędkości podczas jej przebiegu.

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

Te funkcje czasowe są powszechnie nazywane funkcjami krzywej dynamiki i można je zdefiniować za pomocą wstępnie zdefiniowanej wartości słowa kluczowego, funkcji krokowej lub sześciennej krzywej Béziera.

Wstępnie zdefiniowane dozwolone wartości słów kluczowych to:

łatwość
liniowy
łatwość
wyluzować
łatwość wkładania
krok-start
koniec kroku

W przypadku niektórych wartości efekt może nie być tak oczywisty, chyba że czas przejścia jest ustawiony na większą wartość.

Każde z predefiniowanych słów kluczowych ma równoważną wartość sześciennej krzywej Béziera lub równoważną wartość funkcji krokowej. Na przykład następujące dwie wartości funkcji pomiaru czasu byłyby sobie równoważne:

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

Podobnie jak dwa następujące:

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

Korzystanie z krzywych kroków () i Béziera

steps()Funkcja pozwala określić przedziały dla funkcji czasu. To ma jeden lub dwa parametry oddzielone przecinkiem: dodatnia i ewentualnie wartości zarówno startlub end. Jeśli nie zostanie dołączony drugi parametr, domyślnie będzie to end.

Aby zrozumieć funkcje krokowe, oto demo, które używa steps(4, start)dla pola po lewej i steps(4, end)dla pudełka po prawej (najedź kursorem na pole lub załaduj ponownie ramkę, aby wyświetlić przejścia):

Sprawdź ten długopis!

Gdy startjest określony, zmiana wartości następuje na początku każdego przedziału, natomiast endpowoduje zmianę wartości na końcu każdego przedziału.

Szczegółowe spojrzenie na wartości krzywej Béziera wykracza poza zakres tego odniesienia, jednak zapoznaj się z odniesieniami w sekcji powiązanych łączy, aby znaleźć narzędzia, które pokazują wizualnie, jak te wartości działają.

Aby zapewnić zgodność we wszystkich obsługiwanych przeglądarkach, wymagane są prefiksy dostawców, ze standardową składnią zadeklarowaną jako ostatnia:

.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 (pierwsza stabilna wersja IE do obsługi transition-timing-function) nie wymaga -ms-prefiksu.