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