⑥ Временная функция: свойство animation-timing-function

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

Свойство animation-timing-function описывает, как будет развиваться анимация между каждой парой ключевых кадров. Во время задержки анимации временные функции не применяются.

Свойство не наследуется.

animation-timing-function

Значения:

linear - Линейная функция, анимация происходит равномерно на протяжении всего времени, без колебаний в скорости.

функции Безье

ease - Функция по умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,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. На этом сайте вы сможете построить любую траекторию скорости изменения анимации.

пошаговые функции

step-start - Задаёт пошаговую анимацию, разбивая анимацию на отрезки, изменения происходят в начале каждого шага. Вычисляется в steps(1, start).
step-end - Пошаговая анимация, изменения происходят в конце каждого шага. Вычисляется в steps(1, end).
steps(количество шагов, положение шага) - Ступенчатая временная функция, которая принимает два параметра. Первый параметр указывает количество интервалов в функции. Это должно быть положительное целое число больше 0, если вторым параметром не является jump-none — в этом случае оно должно быть положительным целым числом больше 1. Второй параметр, который является необязательным, указывает позицию шага — момент, в котором начинается анимация, используя одно из следующих значений:

jump-start — первый шаг происходит при значении 0;

jump-end — последний шаг происходит при значении 1;
jump-none — все шаги происходят в пределах диапазона (0, 1);
jump-both — первый шаг происходит при значении 0, последний — при значении 1;
start — ведет себя как jump-start;
end — ведет себя как jump-end;

Со значением start анимация начинается в начале каждого шага, со значением end — в конце каждого шага с задержкой. Задержка вычисляется как результат деления времени анимации на количество шагов. Если второй параметр не указан, используется значение по умолчанию end.

initial - Устанавливает значение свойства в значение по умолчанию.
inherit - Наследует значение свойства от родительского элемента.

Синтаксис

CSS

animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: initial;
animation-timing-function: inherit;

📹 ГИФ 2. Примеры использования свойств animation-timing-function

HTML

<div class="linear"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

<div class="ease"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

<div class="ease-in-out"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

<div class="ease-in"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

<div class="ease-out"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

<div class="cubic-bezier-1"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

<div class="cubic-bezier-2"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

<div class="cubic-bezier-3"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

<div class="cubic-bezier-4"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

<div class="steps"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

CSS

body {
  text-align: center; 
  font: 12px/1 monospace;
  background: #F0EFEE;
  color: #777;
}
div { 
  display: inline-block;
  position: relative; 
  margin: 20px 16px 20px 20px; 
  width: 150px; 
  height: 150px; 
  background:white; 
  box-shadow: 0 0 0 5px rgba(0,0,0,.1); 
  transition:.2s; 
}
div:after {
  content: attr(class);
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 0 6px;
}
i {
  position: absolute;
  width: 5px;
  height: 5px;
  left: 0;
  bottom: 0;
  border-radius: 50%;
  background: #F6AC31;
  animation: move 2s infinite;
}
@keyframes move {
  from {
    left: 0;
    bottom: 0; 
  }
  to { 
    left: 145px; 
    bottom: 145px;
  }  
}
.linear i {
  animation-timing-function: linear; 
}
.ease i { 
  animation-timing-function: ease; 
}
.ease-in i { 
  animation-timing-function: ease-in; 
}
.ease-in-out i { 
  animation-timing-function: ease-in-out; 
}
.ease-out i { 
  animation-timing-function: ease-out; 
}
.cubic-bezier-1 i { 
  animation-timing-function: cubic-bezier(.8,1.5,.2,-1); 
}
.cubic-bezier-1:after {content:"cubic-bezier (.8,1.5,.2,-1)"}
.cubic-bezier-2:after {content:"cubic-bezier (.47,-.44,.49,1.46)"}
.cubic-bezier-3:after {content:"cubic-bezier (1,0,0,.5)"}
.cubic-bezier-4:after{ 
  content: "cubic-bezier (.1,.7,1,1)"; 
}
.cubic-bezier-2 i { 
  animation-timing-function: cubic-bezier(.47,-.44,.49,1.46); 
}
.cubic-bezier-3 i { 
  animation-timing-function: cubic-bezier(1,0,0,.5); 
}
.cubic-bezier-4 i { 
  animation-timing-function: cubic-bezier( .1, .7, 1, .1); 
}
.steps i { 
  animation-timing-function: steps(10,end);
}
.steps:after { 
  content: "steps(10,end)"; 
}
i:nth-child(2) {animation-delay:.1s;}
i:nth-child(3) {animation-delay:.2s;}
i:nth-child(4) {animation-delay:.3s;}
i:nth-child(5) {animation-delay:.4s;}
i:nth-child(6) {animation-delay:.5s;}
i:nth-child(7) {animation-delay:.6s;}
i:nth-child(8) {animation-delay:.7s;}
i:nth-child(9) {animation-delay:.8s;}
i:nth-child(10){animation-delay:.9s;}

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

📹 ГИФ 3. Индикатор загрузки

HTML

<div class="loader-container">
  <div class="loader">
    <span>0%</span>
    <span>10%</span>
    <span>20%</span>
    <span>30%</span>
    <span>40%</span>
    <span>50%</span>
    <span>60%</span>
    <span>70%</span>
    <span>80%</span>
    <span>90%</span>
    <span>100%</span>
  </div>
</div>

CSS

body {
  margin: 0;
  background: #E6E2D6;
}
.loader-container {
  position: absolute;
  top: calc(50% - 65px);
  left: calc(50% - 65px);
  width: 100px;
  height: 100px;
  background: #BDE2E0;
  border-radius: 50%;
  border: 15px solid #D7695A;
  box-shadow: inset 0 0 15px rgba(0,0,0,.5);
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 30px;
  line-height: 100px;
  overflow: hidden;
}
@keyframes load {
  100% {
    transform: translateY(-1100px);
  }
}
.loader {
  animation: load 11s steps(11, end) infinite;
}

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