УЧЕБНЫЕ МАТЕРИАЛЫ

Web-верстка, компьютерная графика,
мультимедиа

Анимация CSS3. Создание баннеров




Справочник по CSS3 анимации

В данном справочнике находится описание свойств элементов, которые встречаются в уроках.

Длительность трансформации transition-duration. Длительность трансформации 1 секунда будет во всех примерах. 

 


Трансформация transform

Синтаксис: transform: вид_трансформации(значение);

Трансформирует элемент, т.е. позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций, перечисляя функции трансформации через пробел. 


 

Перемещение: translateX, translateY, translate

Примеры:

1. Перемещение по оси X на 100px:

transform: translateX(100px);

Text

2. Перемещение по оси Y на 50px:

transform: translateY(50px);

Text

3. Перемещение по оси X на 100px, по Y на 50px:

transform: translate(100px, 50px);

Text

 


 

Изменение размера (масштабирование): scaleX, scaleY, scale

Примеры:

1. Увеличение в 2 раза по oси X:

transform: scaleX(2);

Text

2. Увлеличение в 2 раза по oси Y:

transform: scaleY(2);

Text

3. Увеличение в 2 раза:

transform: scale(2);

Text

4. Получается перевёрнутый вид по oси X:

transform: scaleX(-1);

Text

5. Получается перевёрнутый вид по oси Y:

transform: scaleY(-1);

Text

6. Получается перевёрнутый вид:

transform: scale(-1);

Text

 


 

Поворот: rotate

Примеры:

1. Поворот на 45 градусов по часовой стрелке:

transform: rotate(45deg);

Text

2. Поворот на 45 градусов против часовой стрелки:

transform: rotate(-45deg);

Text

 


 

Угловое искажение: skewX, skewY, skew

Примеры:

1. На 45 градусов по оси X:

transform: skewX(45deg);

Text

2. На 45 градусов по оси Y:

transform: skewY(45deg);

Text

3. На 45 градусов по оси X и Y, при этом объект исчезает:

transform: skew(45deg, 45deg);

Text

 


 

Множественная трансформация, записываются через пробел

Пример:

1. Поворот и изменение размера (масштабирование) одновременно:

transform: rotate(135deg) scale(1.5);

Text

 


 

Положение элемента после трансформации: transform-origin. Задаёт, где будет располагаться объект после трансформации относительно своего исходного положения, также это выбор оси вращения для rotate.

Примеры:

1. Положение после трансформации в левом верхнем углу:

transform: scale(0.2);
transform-origin: 0% 0%;

Аналог: top left;

Text

2. Положение после трансформации в правом нижнем углу:

transform: scale(0.2);
transform-origin: 100% 100%;

Аналог: right bottom;

Text

3. Положение после трансформации в левом нижнем углу:

transform: scale(0.2);
transform-origin: 0% 100%;

Аналог: left bottom;

Text

4. Положение после трансформации в центре:

transform: scale(0.2);
transform-origin: 50% 50%;

Задано по умолчанию, аналог: center center;

Text

5. Положение после трансформации справа в центре:

transform: scale(0.2);
transform-origin: right center;

Text

6. Положение после трансформации справа внизу. Выбор оси вращения:

transform: rotate(360deg);
transform-origin: right bottom;

Text

 

 


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;

}