Свойство transition-timing-function
Определяет, как рассчитываются значения между началом и концом перехода
transition-timing-function: linear;Пошаговый план! Как быстро научиться создавать сайты!
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
transition-timing-function: linear;
Использование стандартных временных функций: linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end
<style>
.example-1 {
width: 100px;
height: 100px;
background: #fd4d66;
transition: transform 2s;
transition-timing-function: linear;
}
.example-1:hover {
transform: rotate(90deg);
}
</style>
<div class="example-1">Наведи на меня</div>Наведи на меня
transition-timing-function: steps(4, jump-end);
Расчет значений используя функцию steps. Первый параметр функции - сколько шагов, второй параметр - термин перехода: jump-start, jump-end, jump-none, jump-both, start, end
<style>
.example-2 {
width: 100px;
height: 100px;
background: #fd4d66;
transition: transform 2s;
transition-timing-function: steps(4, jump-end);
}
.example-2:hover {
transform: rotate(90deg);
}
</style>
<div class="example-2">Наведи на меня</div>Наведи на меня
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
Расчет значений используя кривую Бизье. Первое и третье значения должны находится в диапазоне 0-1.
<style>
.example-3 {
width: 100px;
height: 100px;
background: #fd4d66;
transition: transform 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
.example-3:hover {
transform: rotate(90deg);
}
</style>
<div class="example-3">Наведи на меня</div>Наведи на меня
transition-timing-function: linear, ease;
Расчет значений для разных свойств, если их указано несколько
<style>
.example-4 {
width: 100px;
height: 100px;
background: #fd4d66;
transition: background 0.5s, transform 2s;
transition-timing-function: linear, ease;
}
.example-4:hover {
transform: rotate(90deg);
background: #5f77ec;
}
</style>
<div class="example-4">Наведи на меня</div>Наведи на меня