Перехід-функція синхронізації - CSS-хитрощі

transition-timing-functionВластивість, як правило , використовується як частина transitionстенографії, використовується для визначення функції , яка описує , як перехід буде протікати через його тривалість, що дозволяє перехід до швидкості зміни під час її ходу.

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

Ці функції синхронізації зазвичай називають функціями ослаблення, і їх можна визначити за допомогою заздалегідь визначеного значення ключового слова, крокової функції або кубічної кривої Безьє.

Дозволеними значеннями попередньо визначених ключових слів є:

легкість
лінійна
зручність
спрощення
легкість виходу
крок-старт
крок-кінець

Для деяких значень ефект може бути не таким очевидним, якщо тривалість переходу не встановлена на більше значення.

Кожне із заздалегідь визначених ключових слів має еквівалентне кубічне значення кривої Безьє або еквівалентне значення функції кроку. Наприклад, наступні два значення функції синхронізації будуть еквівалентні один одному:

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

Як і наступні два:

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

Використання кроків () та кривих Безьє

steps()Функція дозволяє задати інтервали для функції синхронізації. Він приймає один або два параметри, розділені комою: ціле додатне число та необов’язкове значення startабо end. Якщо другий параметр не включений, він буде встановлений за замовчуванням на end.

Щоб зрозуміти крокові функції, ось демонстрація, яка використовується steps(4, start)для поля зліва та steps(4, end)для поля праворуч (наведіть курсор на поле або перезавантажте кадр, щоб переглянути переходи):

Перевірте цю ручку!

Коли startвказано, зміна значень відбувається на початку кожного інтервалу, тоді endяк зміна значень відбувається в кінці кожного інтервалу.

Детальний огляд значень кривих Безьє виходить за рамки цього посилання, однак див. Посилання у розділі відповідних посилань для інструментів, які наочно демонструють, як ці значення працюють.

Для сумісності у всіх підтримуваних браузерах потрібні префікси постачальників зі стандартним синтаксисом, оголошеним останнім:

.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 для підтримки transition-timing-function) не вимагає -ms-префікса.