Справочник DESIGN/HTML/CSS

Мой Справочник | CSS3 | Анимации

@keyframes
Вызов анимации
Синтаксис: @keyframes имя_анимации {...} 		@keyframes stretching1 {
    0% {width: 100px;}
    100% {width: 200px;}
} 		В % указана раскадровка анимации:
0% - начало, 100% - конец
Раскадровка @keyframes
Можно задавать множество шагов @keyframes stretching2 {
    0% {width: 100px;}
    25% {width: 150px;}
    50% {width: 200px;}
    75% {width: 150px;}
    100% {width: 200px;}
}
@keyframes stretching2 {
    0%, 50% {width: 100px;}
    to {width: 200px;}
} 		Вместо 0% и 100% можно использовать ключевые слова from и to
0%, 50% - группировка кадров (элемент сразу изменяет свойства и не меняет их до 50%)
animation-name:
Связываем элемент с анимацией .some-class {
    animation-name: stretching;
} 		Анимаций может быть несколько (через запятую)
animation-duration:
Продолжительность анимации в секундах (1s, 1ms) .some-class {
    animation-name: stretching1;
    animation-duration: 1s;
    animation-iteration-count: 10;
}
10 циклов
animation-iteration-count:
Кол-во циклов (бесконечно: infinite) .some-class {
    animation-name: stretching2;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
Бесконечное кол-во циклов
Множественная анимация
Параметры для различных анимаций перечисляются через запятую @keyframes coloring {
    0% {background-color: maroon;}
    25% {background-color: red;}
    50% {background-color: pink;}
    75% {background-color: red;}
    100% {background-color: maroon;}
}
.some-class {
    animation-name: stretching2, coloring;
    animation-duration: 1s, 2s;
    animation-iteration-count: 10, infinite;
}
animation-direction:
Направление анимации
(normal (0 - 100%) и
reverse (100 - 0%)) 		@keyframes move {
    0% {transform: translateX(0px);}
    25% {transform: translateX(20px);}
    50% {transform: translateX(40px);}
    75% {transform: translateX(60px);}
    100% {transform: translateX(80px);}
}
.some-class1 {
    animation-name: move;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}
.some-class2 {
    animation-name: move;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
}
animation-delay:
Задержка анимации перед стартом
(в s и ms) 		.some-class {
    animation-name: coloring;
    animation-duration: 1s;
    animation-iteration-count: 10;
    animation-delay: 5s;
}
Задержка анимации 5 секунд
animation-fill-mode:
Состояние элемента до и после анимации
forwards, backwards и both
Работает только с заданным числом циклов 		@keyframes move2 {
    0% {
        transform: translateX(-20px);
        background: red;
    }
    25% {transform: translateX(30px);}
    50% {transform: translateX(40px);}
    75% {transform: translateX(50px);}
    100% {
        transform: translateX(60px);
        background: yellow;
    }
}
.some-class1 {
    animation-name: move2;
    animation-duration: 5s;
    animation-iteration-count: 3;
    animation-delay: 3s;
    animation-fill-mode: backwards;
}
.some-class2 {
    animation-name: move2;
    animation-duration: 5s;
    animation-iteration-count: 3;
    animation-delay: 3s;
    animation-fill-mode: forwards;
}
.some-class3 {
    animation-name: move2;
    animation-duration: 5s;
    animation-iteration-count: 3;
    animation-delay: 3s;
    animation-fill-mode: both;
}

При backwards до начала анимации элемент находится на 0% кадре анимации, после анимации возвращается в исходное состояние (как он находится в коде без анимации)

При forwards до начала анимации он находится как в коде, после завершения анимации принимает состояние как на 100% кадре анимации
both объединяет оба свойства
animation-play-state:
Если добавить это свойство элементу, то анимацию можно остановить. Принимает два значения running (по ум*) и paused .some-class {
    animation-play-state: paused;
} 		Без JavaScript не реализуется
animation-timing-function:
Временные функции анимации, принимают несколько значений:

ДЕЙСТВУЮТ ТОЛЬКО НА ОДИН ШАГ анимации, поэтому есть смысл их использовать на всём цикле, т.е. на шаге 0% - 100%

linear - линейная (по ум*);
ease - парабола;
ease-in - вогнутая парабола;
ease-out - выгнутая парабола;
ease-in-out - S-обр. парабола;
cubic-bezier (1,1,1,1) - Кривые Бизье;
steps (число_шагов, направление) - Кривые Бизье; 		@keyframes move3 {
    0% {transform: translateX(-100px);}
    100% {transform: translateX(-100px);}
}
.some-class1 {
    animation-name: move3;
    animation-duration: 5s;
    animation-iteration-count: 30;
    animation-delay: 3s;
    animation-timing-function: linear;
}
.some-class2 {
    ...
    animation-timing-function: ease;
}
.some-class3 {
    ...
    animation-timing-function: ease-in;
}
.some-class4 {
    ...
    animation-timing-function: ease-out;
}
.some-class5 {
    ...
    animation-timing-function: ease-in-out;
}
.some-class6 {
    ...
    animation-timing-function: cubic-bezier(0, 1.09, 1, -0.03);
}
.some-class7 {
    ...
    animation-timing-function: steps(5, end);
}
1
2
3
4
5
6
7
Краткая запись в CSS-коде
animation:
1 - |animation-name| имя
2 - |animation-duration| длительность
3 - |animation-timing-function| функция
4 - |animation-iteration-count| повторы 		.some-class6 {
    animation: move 3s linear 10;
}
anim_tf.png anim_tf2.png

Разработчик: Евгений Леухин
EvgenyLeukhin@yandex.ru

© 2016 - 2021