CSS3
February 15, 2021
⑥ Временная функция: свойство animation-timing-function
Продолжим изучение темы CSS3 - анимация. Если пропустили прошлые статьи, то вот ссылки на них:
- ① Введение в CSS3-анимацию
- ② Ключевые кадры
- ③ Временная функция для ключевых кадров
- ④ Название анимации: свойство animation-name
- ⑤ Продолжительность анимации: свойство animation-duration
Свойство 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;
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;}
С помощью пошаговой анимации можно создавать интересные эффекты, например, печатающийся текст или индикатор загрузки.
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; }
Продолжение в следующей статье!