Самостоятельная работа по веб-программирование Саидов Сарварбек Принял: Хожамуратов Бекмурод

jump-end - последний шаг происходит при значении 

jump-none - все шаги происходят в пределах диапазона (0, 1)

jump-both — первый шаг происходит при значении 0, последний — при значении 1

start — ведет себя как jump-start

end — ведет себя как jump-end

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

Устанавливает значение свойства в значение по умолчанию.

• 
  Inherit - Наследует значение свойства от родительского элемента.
  

Синтаксис

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;


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;}

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

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;