Функция за преход-време - 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-префикса.