③ Функция перехода transition-timing-function

Продолжим изучение темы CSS3 - переходы. Если пропустили прошлые статьи, то вот ссылки на них:

Свойство задаёт временную функцию, которая описывает скорость перехода объекта от одного значения к другому. Если вы определяете более одного перехода для элемента, например, цвет фона элемента и его положение, вы можете использовать разные функции для каждого свойства. Свойство не наследуется.

transition-timing-function

Значения:

ease - Функция по умолчанию, переход начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).
linear - Переход происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0,0,1,1).
ease-in - Переход начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1).
ease-out - Переход начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1).
ease-in-out - Переход медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1).
cubic-bezier(x1, y1, x2, y2) - Позволяет вручную установить значения от 0 до 1 для кривой ускорения. На этом сайте вы сможете построить любую траекторию перехода.
initial - Устанавливает значение свойства в значение по умолчанию.
inherit - Наследует значение свойства от родительского элемента.

Синтаксис

CSS

div {
transition-timing-function: linear;
}

📹 ГИФ 2. Свойство transition-timing-function

HTML

<div class="wrap">
<a href="#go"><span class="fa fa-power-off"></span>Запустить</a>
<a href="#reset"><span class="fa fa-refresh"></span>Назад</a>
<div id="go">
  <kbd>transition-timing-function</kbd>
  <p><kbd>linear</kbd></p>
  <p><kbd>ease</kbd></p>
  <p><kbd>ease-in</kbd></p>
  <p><kbd>ease-out</kbd></p>
  <p><kbd>ease-in-out</kbd></p>
  <p><kbd>cubic-bezier</kbd></p>
</div>
</div>

CSS

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: 'Playfair Display', serif; 
  line-height: 1;
  color: #696150;
}
.wrap {max-width:660px;}
#go > kbd{display:block;margin-top:15px;}
p {
  width: 125px;
  padding: 10px 0;
  text-align: center;
  border-radius: 4px;
  transition-duration: 3s;
}
a {
  text-decoration: none;
  display: inline-block;
  margin-right: 20px;
  color: inherit;
}
.fa {padding-right: 10px;font-weight:bold}
.fa.fa-power-off {color:#FF9E3B}
.fa.fa-refresh {color:#B7CCCC}
p:nth-of-type(1) {
background: #F06E58;
transition-timing-function: linear;}
p:nth-of-type(2) {
background: #FEA45D;
transition-timing-function: ease;}
p:nth-of-type(3) {
background: #FDF569;
transition-timing-function: ease-in;}
p:nth-of-type(4) {
background: #B9EA7B;
transition-timing-function: ease-out;}
p:nth-of-type(5) {
background: #B9ECFE;
transition-timing-function: ease-in-out;}
p:nth-of-type(6) {
background: #82DDFF;
transition-timing-function: cubic-bezier(0.6, 0.1, 0.15, 0.8);}
#go:target p{transform:translateX(300px)}

Для создания более реалистичных анимаций используйте функцию cubic-bezier:

📷 РИС. 1. ПОЛЬЗОВАТЕЛЬСКИЕ ФУНКЦИИ CUBIC BÉZIER С САЙТА EASINGS.NET

ТАБЛИЦА 1. ПОЛЬЗОВАТЕЛЬСКИЕ ФУНКЦИИ CUBIC BÉZIER

Структура таблицы следующая: Пользовательское название - Значение функции

easeInSine - cubic-bezier(0.47, 0, 0.745, 0.715);
easeOutSine - cubic-bezier(0.39, 0.575, 0.565, 1);
easeInOutSine - cubic-bezier(0.445, 0.05, 0.55, 0.95);
easeInQuad - cubic-bezier(0.55, 0.085, 0.68, 0.53);
easeOutQuad - cubic-bezier(0.25, 0.46, 0.45, 0.94);
easeInOutQuad - cubic-bezier(0.455, 0.03, 0.515, 0.955);
easeInCubic - cubic-bezier(0.55, 0.055, 0.675, 0.19);
easeOutCubic - cubic-bezier(0.215, 0.61, 0.355, 1);
easeInOutCubic - cubic-bezier(0.645, 0.045, 0.355, 1);
easeInQuart - cubic-bezier(0.895, 0.03, 0.685, 0.22);
easeOutQuart - cubic-bezier(0.165, 0.84, 0.44, 1);
easeInOutQuart - cubic-bezier(0.77, 0, 0.175, 1);
easeInQuint - cubic-bezier(0.755, 0.05, 0.855, 0.06);
easeOutQuint - cubic-bezier(0.23, 1, 0.32, 1);
easeInOutQuint - cubic-bezier(0.86, 0, 0.07, 1);
easeInExpo - cubic-bezier(0.95, 0.05, 0.795, 0.035);
easeOutExpo - cubic-bezier(0.19, 1, 0.22, 1);
easeInOutExpo - cubic-bezier(1, 0, 0, 1);
easeInCirc - cubic-bezier(0.6, 0.04, 0.98, 0.335);
easeOutCirc - cubic-bezier(0.075, 0.82, 0.165, 1);
easeInOutCirc - cubic-bezier(0.785, 0.135, 0.15, 0.86);
easeInBack - cubic-bezier(0.6, -0.28, 0.735, 0.045);
easeOutBack - cubic-bezier(0.175, 0.885, 0.32, 1.275);
easeInOutBack - cubic-bezier(0.68, -0.55, 0.265, 1.55).

Продолжение в следующей статье!