Анимация CSS3. Создание баннеров
Справочник по CSS3 анимации
В данном справочнике находится описание свойств элементов, которые встречаются в уроках.
Длительность трансформации transition-duration. Длительность трансформации 1 секунда будет во всех примерах.
Трансформация transform
Синтаксис: transform: вид_трансформации(значение);
Трансформирует элемент, т.е. позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций, перечисляя функции трансформации через пробел.
Перемещение: translateX, translateY, translate
Примеры:
1. Перемещение по оси X на 100px:
transform: translateX(100px);
2. Перемещение по оси Y на 50px:
transform: translateY(50px);
3. Перемещение по оси X на 100px, по Y на 50px:
transform: translate(100px, 50px);
Изменение размера (масштабирование): scaleX, scaleY, scale
Примеры:
1. Увеличение в 2 раза по oси X:
transform: scaleX(2);
2. Увлеличение в 2 раза по oси Y:
transform: scaleY(2);
3. Увеличение в 2 раза:
transform: scale(2);
4. Получается перевёрнутый вид по oси X:
transform: scaleX(-1);
5. Получается перевёрнутый вид по oси Y:
transform: scaleY(-1);
6. Получается перевёрнутый вид:
transform: scale(-1);
Поворот: rotate
Примеры:
1. Поворот на 45 градусов по часовой стрелке:
transform: rotate(45deg);
2. Поворот на 45 градусов против часовой стрелки:
transform: rotate(-45deg);
Угловое искажение: skewX, skewY, skew
Примеры:
1. На 45 градусов по оси X:
transform: skewX(45deg);
2. На 45 градусов по оси Y:
transform: skewY(45deg);
3. На 45 градусов по оси X и Y, при этом объект исчезает:
transform: skew(45deg, 45deg);
Множественная трансформация, записываются через пробел
Пример:
1. Поворот и изменение размера (масштабирование) одновременно:
transform: rotate(135deg) scale(1.5);
Положение элемента после трансформации: transform-origin. Задаёт, где будет располагаться объект после трансформации относительно своего исходного положения, также это выбор оси вращения для rotate.
Примеры:
1. Положение после трансформации в левом верхнем углу:
transform: scale(0.2);
transform-origin: 0% 0%;
Аналог: top left;
2. Положение после трансформации в правом нижнем углу:
transform: scale(0.2);
transform-origin: 100% 100%;
Аналог: right bottom;
3. Положение после трансформации в левом нижнем углу:
transform: scale(0.2);
transform-origin: 0% 100%;
Аналог: left bottom;
4. Положение после трансформации в центре:
transform: scale(0.2);
transform-origin: 50% 50%;
Задано по умолчанию, аналог: center center;
5. Положение после трансформации справа в центре:
transform: scale(0.2);
transform-origin: right center;
6. Положение после трансформации справа внизу. Выбор оси вращения:
transform: rotate(360deg);
transform-origin: right bottom;
Animation и Keyframes
CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов :before и :after. Список анимируемых свойств приведен ниже.
@keyframes
Вызов анимации
Синтаксис: @keyframes имя_анимации {...}
@keyframes stretching1 {
0% {width: 100px;}
100% {width: 200px;}
}
Раскадровка @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;}
}
animation-name:
Связываем элемент с анимацией
.some-class {
animation-name: stretching;
}
animation-duration:
Продолжительность анимации в секундах (1s, 1ms)
.some-class {
animation-name: stretching1;
animation-duration: 1s;
animation-iteration-count: 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;
}
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;
}
animation-play-state:
Если добавить это свойство элементу, то анимацию можно остановить. Принимает два значения running (по ум*) и paused
.some-class {
animation-play-state: paused;
}
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);
}
Краткая запись в CSS-коде
animation:
1 - |animation-name| имя
2 - |animation-duration| длительность
3 - |animation-timing-function| функция
4 - |animation-iteration-count| повторы
.some-class6 {
animation: move 3s linear 10;
}