CSS анимация @keyframes + 7 примеров

Приветствую, друзья! Сегодня разберем css анимацию с использованием правила @keyframes
CSS правило @keyframes
Создание начинается с объявления имени анимации в блоке @keyframes и определения "шагов анимации"
Структура:
@keyframes [название] {
[шаг]: {
[стили]
}
[шаг]: {
[стили]
}
...
}
Пример:
- Результат
- css
@keyframes scaling {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(2);
}
}
В первой строчке, после ключевого слова @keyframes идёт название анимации, scaling, к ней мы будем обращаться далее.
После объявления прописываются "шаги анимации" - кадры, в % от всей длительности анимации. Обратите внимание, что между 0% и 100% вы можете вставлять сколько угодно промежуточных значений, будь-то 30%, 75% или даже 94%.
Обращение к блоку ключевых кадров
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction
Это сокращённая форма записи, описание каждого свойства ниже:
animation-name | Название анимации, к которой происходит обращение из @keyframes |
animation-duration | Продолжительность или выполнение анимации. Может задаваться в секундах s или миллисекундах ms |
animation-timing-function | Временная функция, динамика изменения свойства, подсматривать можно здесь http://htmlbook.ru/css/transition-timing-function |
animation-delay | Время задержки анимации До начала. |
animation-iteration-count | Количество повторов анимации (infinite - бесконечно, также можно задать простое число без единиц измерения) |
animation-direction | Направление анимации, последовательно, в обратную стороно или «туда-обратно» (normal - анимация проигрывается от начала до конца и останавливается. alternate - проигрывается от начала до конца и в обратном направлении. alternate-reverse - проигрывается с конца до начала и обратно. reverse - анимация проигрывается с конца. |
animation-play-state | Управление проигрыванием анимации (paused (пауза), running (запуск), ...). Можно применить на :hover или из функции JavaScript при необходимости |
animation-fill-mode | Состояние элемента до и после воспроизведения анимации. Например, значение backwards позволяет вернуть все свойства к исходному состоянию сразу после применения анимации |
Пример:
animation: animationname 3s linear 2s infinite reverse
В примере описано обращение к блоку @keyframes animationname, продолжительность выполнения анимации 3 секунды, линейная динамика, пауза перед запуском 2 секунды, анимация повторяется бесконечно и выполняется в обратную сторону.
Переходим к примерам
Бесконечная анимация
- Результат
- css
@keyframes moving {
0% {
transform: translate(0, 0);
}
30% {
transform: translate(50px, 0);
}
60% {
transform: translate(50px, 50px);
}
100% {
transform: translate(0, 50px);
}
}
div {
width: 50px;
height: 50px;
background-color: #3debff;
animation: moving 2s infinite;
}
В данном примере значение infinite задает проигрывание анимации от начала до конца, и затем в обратном направлении
Остановка анимации
- Результат
- css
@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);
}
}
div {
animation: turning 1s infinite alternate;
}
div:hover {
animation-play-state: paused;
}
Здесь проигрывание анимации прирывается как только пользователь навел мышь на элемент, это происходит за счет установки animation-play-state: paused;
Пошаговая анимация
- Результат
- css
@keyframes steps {
10% {
transform: translate(60px, 0);
}
20% {
transform: translate(120px, 60px);
}
30% {
transform: translate(180px, -60px);
}
40% {
transform: translate(240px, 0);
}
50% {
transform: translate(300px, 60px);
}
60% {
transform: translate(360px, -60px);
}
70% {
transform: translate(420px, -120px);
}
80% {
transform: translate(480px, 60px);
}
90% {
transform: translate(540px, 0);
}
}
div {
animation: steps 5s infinite step-end;
}
Пошаговая анимация задается параметром animation-timing-function со значением step-end
Выполнение анимации в обратную сторону
- Результат
- css
Нормальное выполение
Выполнение в обратную сторону
@keyframes moving {
0% {
transform: translate(0, 0);
}
30% {
transform: translate(70px, 0);
}
60% {
transform: translate(140px, 0);
}
100% {
transform: translate(200px, 0);
}
}
div:first-child {
animation: moving 2s ease-out 1s infinite normal;
}
div:last-child {
animation: moving 2s ease-out 1s infinite reverse;
}
Направление анимации задается свойством animation-direction. normal - обычное направление, reverse - выполнение в обратную сторону, alternate - от начала до конца и обратно, alternate-reverse - от конца в начало и обратно.
Задержка анимации перед началом воспроизведения
- Результат
- css
Обычное выполнение
Выполнение с задержкой 5с
Выполнение с задержкой -1с
@keyframes moving {
0% {
transform: translate(0, 0);
}
30% {
transform: translate(70px, 0);
}
60% {
transform: translate(140px, 0);
}
100% {
transform: translate(200px, 0);
}
}
div:nth-child(1) {
animation: moving 2s ease-out 0s infinite alternate;
}
div:nth-child(2) {
animation: moving 2s ease-out 5s infinite alternate;
}
div:nth-child(3) {
animation: moving 2s ease-out -1s infinite alternate;
}
За задержку перед началом анимации отвечает свойство animation-delay (s). В случае нескольких анимаций время для каждой из них можно задать через запятую.
Воздействие на элемент вне времени анимации
- Результат
- css
none
forwards
backwards
both
@keyframes timing {
0% {
left: 1em;
}
100% {
left: 10em;
margin-left: 8em;
}
}
div {
animation: timing 5s;
}
div:nth-child(1) {
animation-fill-mode: none;
}
div:nth-child(2) {
animation-fill-mode: forwards;
}
div:nth-child(3) {
animation-fill-mode: backwards;
}
div:nth-child(4) {
animation-fill-mode: both;
}
С помощью свойства animation-fill-mode можно определить будет ли анимация воздействовать на элемент вне времени воспроизведения анимации (до начала или после окончания).
Значения:
- none — анимация воздействует на элемент только во время воспроизведения, по окончании элемент возвращается в исходное состояние.
- forwards — анимация воздействует на элемент по окончании воспроизведения.
- backwards — анимация воздействует на элемент до начала воспроизведения.
- both — анимация воздействует на элемент и до начала, и после окончания воспроизведения.
В данном уроке мы разобрали создание css анимации с использованием блока @keyframes и все возможные варианты и настройки.