19.09.2018
CSS правило @keyframes
Создание CSS анимации начинается с объявления имени анимации в блоке @keyframes и определения так называемых шагов анимации или ключевых кадров.
CSS
animation: turning 2s ease-out 1s infinite alternate;
Структура @keyframes
@keyframes turning {
0% {
border-radius: 0 0 0 0;
transform: rotate(0deg);
}
25% {
border-radius: 50% 0 0 0;
transform: rotate(45deg);
}
50% {
border-radius: 50% 50% 0 0;
transform: rotate(90deg);
}
75% {
border-radius: 50% 50% 50% 0;
transform: rotate(135deg);
}
100% {
border-radius: 50% 50% 50% 50%;
transform: rotate(180deg);
}
}
See the Pen Animation CSS Base Example by Denis (@deniscreative) on CodePen.0
Составное свойство «animation» можно разделить на несколько отдельных свойств:
| animation-name | Название анимации, к которому происходит обращение из @keyframes |
| animation-duration | Продолжительность или на какое время растягивается выполнение CSS анимации. Может задаваться в секундах (s) или миллисекундах (ms) |
| animation-timing-function | Временная функция, динамика движения объекта или изменения свойства (ease — (по-умолчанию) анимация начинается медленно, разгоняется и заканчивается медленно; linear — анимация происходит равномерно; ease-in — начинается медленно и ускоряется к последнему ключевому кадру; ease-out — начинается быстро и плавно замедляется вконце; ease-in-out — медленно начинается и медленно заканчивается) |
| animation-delay | Время задержки анимации ДО старта. Также задаётся в секундах или миллисекундах |
| animation-iteration-count | Количество повторов (итерации) анимации (infinite — бесконечно, или можно задать простое число без единиц измерения) |
| animation-direction | Направление анимации, последовательно, вспять или «туда-обратно» (normal — (по-умолчанию) анимация проигрывается от начала до конца и останавливается; alternate — проигрывается от начала до конца и в обратном направлении; alternate-reverse — проигрывается с конца до начала и обратно; reverse — анимация проигрывается с конца.) |
| animation-play-state | Управление проигрыванием анимации (paused (пауза), running (запуск) и т.д.). Можно применить на :hover или из функции JS при необходимости |
| animation-fill-mode | Состояние элемента до и после воспроизведения анимации. Например, значение backwards позволяет вернуть все свойства к исходному состоянию сразу после применения анимации но более полезно значениеforwards, которое после окончания анимации, остановится на последнем ее шаге |
Видео
Link — https://webdesign-master.ru/blog/html-css/2017-08-01-css-animation.html