Содержание:

@keyframes

animation-name

animation-duration

animation-timing-function

animation-iteration-count

animation-direction

animation-play-state

animation-delay

animation-fill-mode

Свойство позволяет анимировать элементы страницы.

Можно управлять длительностью анимации, повторением, направлением, типом движения и шагами. Анимировать можно любые элементы, в том числе псевдо-элементы.

Обязательное условие — наличие конкретных значений. Свойства со значением не анимируются.

Спецификация: w3.org/TR/css3-animations

Сафари в настоящее время не поддерживает анимацию псевдоэлементов, для просмотра записи воспользуйтесь другими браузерами

Пример Css-анимации:

Пример кода анимации:

Подключение анимации:

— имя анимации — длительность — бесконечное повторение — тип движения

@keyframes

Сама анимация задается внутри блока . После задается имя анимации, а потом внутри фигурных скобок — её шаги.

Шаги можно задавать через проценты или с помощью ключевых слов и .

Анимация CSS: примеры

При этом в шагах можно менять тип анимации ():

Animation-name

Используется для задания имени анимации.

Возможные значения: одно или несколько имен анимации. Значение по умолчанию: нет.

— одна анимация. — две анимации, имена задаются через запятую.

Animation-duration

Длительностью анимации управляет свойство .

Возможные значения: время в секундах (s) или миллисекундах (ms). В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение — 0s.

Animation-timing-function

Свойство определяет тип анимации.

Возможные значения:

Плавная анимация — скольжение (значение по умолчанию) — ровное движение — ускорение к концу — ускорение в начале — более плавное скольжение, чем

позволяет задавать сложный тип анимации.

Значения удобно подбирать на cubic-bezier.com.

Пошаговая анимация и — позволяют задать пошаговую анимацию, обязательно задавать конкретные шаги. При этом с изменения происходят в начале шага, а с — в конце.

. Если выставить , счетчик будет начинаться с единиц.

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

Animation-iteration-count

Управляет повторением анимации. Значение по умолчанию: 1 (анимация проигрывается один раз).

Возможные значения:

число — сколько раз проиграть анимацию. — бесконечное повторение.

Animation-direction

Отвечает за направление анимации.

Возможные значения:

— анимация проигрывается в обычном направлении, с начала и до конца. — анимация проигрывается в обратном направлении, то есть с конца. — анимация проигрывается с начала и до конца, а затем в обратном направлении. — анимация проигрывается с конца до начала, а затем в обратном направлении.

Animation-play-state

Управляет остановкой и проигрыванием анимации.

Возможные значения: — анимация проигрывается (значение по умолчанию). — анимация застывает на первом шаге.

Управлять шагом, где будет остановка, не получается, но можно останавливать анимацию по :

Animation-delay

С помощью можно задавать задержку анимации перед началом воспроизведения.

Возможные значения: время в секундах (s) или миллисекундах (ms). Значения могут быть отрицательными. В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение — 0s.

Animation-fill-mode

Свойство определяет будет ли анимация воздействовать на элемент вне времени воспроизведения анимации.

Возможные значения:

— анимация воздействует на элемент только во время воспроизведения, по окончании элемент возвращается в исходное состояние. — анимация воздействует на элемент по окончании воспроизведения. — анимация воздействует на элемент до начала воспроизведения. — анимация воздействует на элемент и до начала, и после окончания воспроизведения.

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

Все эти свойства можно записать с помощью короткой записи, например:

Обязательные значения — имя анимации и длительность. Первое временное значение считается длительностью воспроизведения, второе — задержкой.

Урок. CSS анимация

Урок по css анимации позволяет научиться создавать анимированные изображения без использования Flash. Эта технология постепенно вытесняет создание рекламных и других анимированных баннеров средствами Flash. В уроке рассказывается, как создать полноценный анимированный рекламный баннер средствами языка CSS3.

Для выполнения урока необходимо предварительноскачать исходные материалы 

1. Создайте папку для выполнения упражнений.

2. Скопируйте в нее папку img со всеми необходимыми материалами.

1. Переходы

Переходом в css анимации называется плавная смена свойств элемента при наведении на него курсора мыши. При использовании псевдокласса :hover изменение происходит мгновенно, transition же позволяет задать продолжительность и метод перехода.

transition: [свойство,] длительность;

Синтаксис:

transition: all 1s; //для всех свойств длительность перехода 1с

transition: background 0.5s; //для фона длительность перехода 0,5с

Пример. При наведении на элемент div с классом round-to-circle, он из квадрата преобразуется в круг, у него изменяется цвет фона и непрозрачность становится равной 1. Все это происходит плавно, в течение 0.3с, т.к. мы задали свойство transition.

Анимация CSS. Введение + свойство transition

Если это свойство не задано, то смена свойств будет происходить моментально.

Рис. 1

Рис. 2

Задание 1

1. Реализуйте этот пример. Сохраните файл под именем 01_perehod.html

2. Измените значение в секундах до 1.5 секунд. Обновите страницу. Оцените разницу.

2. Трансформация

Трансформация — это изменение вида элемента, к которым относятся следующие визуальные модификации: поворот, масштабирование, наклон и сдвиг. Чтобы сделать трансформацию, к селектору добавляется свойство transform, а в качестве значения пишется функция трансформации, и её параметры. В общем виде это записывается так:

transform: функция(параметры);

2.1 Функция поворота – rotate()

Поворачивает элемент на заданный угол

transform: rotate(α)

Здесь: α — угол поворота. Положительное значение поворачивает элемент по часовой стрелке, отрицательное против.

Синтаксис:

transform: rotate(90deg) //поворот по часовой на 90 градусов

transform: rotate(-180deg) //поворот против часовой на 180 градусов

Пример. При наведении на изображение, оно плавно поворачивается на 60 градусов по часовой стрелке.

Рис. 3

Рис. 4

Задание 2

1. Реализуйте этот пример. Сохраните под именем 02_rotate.html

2. Изменяйте значение в секундах. Оцените разницу.

2.2 Функция масштабирования – scale()

Задаёт масштаб элемента по горизонтали и вертикали.

transform: scale(sx[, sy]);

Здесь: sx — изменение масштаба по оси X; sy — изменение масштаба по оси Y. Значение больше 1 увеличивает масштаб элемента, меньше 1, наоборот, его уменьшает. Если задано только одно значение, то масштабирование будет происходить пропорционально в обе стороны: scale(1.2) соответствует scale(1.2, 1.2).

Синтаксис:

transform: scale(3, 1]); //увеличение ширины в 3 раза

transform: scale(1, 0.5); //уменьшение высоты в 2 раза

transform: scale(1.5); //увеличение размера в 1,5 раза

Пример. Уменьшим изображение до 80% от его первоначального состояния –scale(0.8). При наведении на изображение восстановим его прежнее состояние – scale(1).

Рис. 5

Рис. 6

Задание 3

1. Реализуйте этот пример. Сохраните файл под именем 03_scale.html

2. Изменяйте значение в секундах и величину трансформации. Оцените разницу.

2.3 Функция наклона – skew()

Наклоняет элемент на заданное значение по горизонтали и вертикали в плоскости экрана.

transform: skew(ax[, ay])

Здесь: ax — угол наклона по оси X; ay — угол наклона по оси Y. Если значение ay не указано, то оно считается равным 0: skew(30deg) соответствует skew(30deg, 0).

Положительное значение угла наклоняет влево, отрицательно значение – вправо

Синтаксис:

transform: skew(30deg, 60deg])

transform: skew(60deg, 30deg])

transform: skew(30deg) РАВНОСИЛЬНО transform: skew(30deg, 0)

Пример. В этом примере мы задали наклон 30 градусов для элемента p. Но нам нужен наклон только для фона параграфа, а сам текст должен быть выровнен прямо, поэтому мы положили текст внутри элемента span и задали ему компенсирующий наклон.

Рис. 7

Рис. 8

Задание 4

Реализуйте этот пример. Сохраните под именем 04_skew.html

2.4 Функция сдвига – translate()

Сдвигает элемент на заданное значение по горизонтали и вертикали в плоскости экрана.

transform: translate(tx[, ty])

Здесь: tx — значение смещения по оси X в пикселях, процентах или других единицах CSS; ty — смещение по оси Y. Если значение ty не указано, то оно считается равным 0: translate(30px) соответствует translate(30px, 0).

Синтаксис:

transform: translate(30px, 0]) РАВНОСИЛЬНО transform: translate(30px)

transform: translate(0, -30px]) //сдвиг вверх на 30px

transform: translate(60px, 30px])сдвиг вправо на 60px и вниз на 30px

transform: translate(-2%]) //сдвиг влево на 2%

Задание 5

1. Файл 04_skew.html сохраните под новым именем 05_translate.html

2. Кроме масштабирования добавим перемещение вниз на 30px. Для этого изменим стиль .tovar:hover так:

Рис. 9

Теперь при наведении на изображение оно не только масштабируется, но и сдвигается вниз на 30px

Рис.

10

2. css анимации

Свойство animation позволяет создавать более сложные анимации. Эти анимации состоят из двух компонентов: стилевое описание анимации и набор ключей, определяющих начальное, конечное и, возможно, промежуточное состояние анимируемых стилей.

Создание css анимации начинается с установки ключевых кадров правила @keyframes. Кадры определяют, какие свойства, на каком шаге будут анимированы.

Синтаксис:

@keyframes название_анимации {
from {свойство: параметры;}
50% {свойство: параметры;}
to {свойство: параметры;}
}

Ключевые кадры создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно.

После объявления правила @keyframes, мы должны ссылаться на него в селекторе в свойстве animation.

Синтаксис, сокращенная запись:

h1 {
animation: название_анимации длительность [количество_повторений];
}

Обязательные параметры:

• название анимации
• длительность

Дополнительный параметр

• количество повторений. Если не указано количество повторений – по умолчанию 1. Можно указывать любое другое число, либо использовать ключевое слово infinite – бесконечное количество повторений.

Таким образом для задания css анимации элемента (селектора), полная запись будет выглядеть следующим образом:

h1 {
animation: название_анимации длительность [количество_повторений]; /*в свойстве селектора h1 объявляем анимацию*/
}

@keyframes название_анимации { /*описание анимации для селектора h1*/
from {свойство: параметры;}
50% {свойство: параметры;}
to {свойство: параметры;}
}

У css анимации есть и другие свойства. Например, задержка анимации, направление и т.д. Подробнее можете узнать на сайте: https://webref.ru/css/animation

Пример. Применим к классу sun анимацию rotate длительностью 3 секунды с бесконечным количеством повторений.

Рис. 11

Задание 6

Реализуйте пример с крутящимся солнышком. Сохраните под именем 06_sun.html

Пример. Появление текста слева, справа и посередине.

Рис. 12

Задание 7

Реализуйте пример с движущимся текстом. Сохраните под именем 07_text.html

Повторяющаяся анимация с плавной сменой итераций

Плавный переход от итерации к итерации при повторяющейся анимации можно достичь, используя параметр прозрачности opacity.

Задание 8 1. Реализуйте нижеприведенный код. Сохраните файл под именем 08_media.html

Рис. 13

2. Просмотрите результат. Видно, что после плавного исчезновения текста он снова появляется, но достаточно резко. Это происходит потому, что в стилях в конце итерации непрозрачность равна нулю (строка 18 to{opacity: 0}), а в начале итерации непрозрачность равна 1 (строка 16 from{opacity: 1}). Происходит резкая смена от полной непрозрачности к полной яркости.

3. Внесите изменения в эти свойства следующим образом – установите непрозрачность 0 в начале итерации (свойство from) и добавьте еще один временной промежуток 40% с непрозрачностью 1 и в результате появление текста в начале итерации также будет плавным.

Рис. 14

Итоговое задание

Содержание баннера взято с сайта http://wunder-digital.kz/medijnaya-reklama/

1. Просмотрите css анимацию itog.gif (рис. 15).

Рис. 15. Файл itog.gif

2. Откройте в браузере файл zadanie.html. Как видите, пока анимация не работает.

3. Анимируйте шаблон zadanie.html, для этого напишите стили для анимаций и примените их к соответствующим элементам в соответствии с файлом itog.gif:

• заголовок плавно появляется слева и останавливается примерно на середине фона;
• описание появляется справа и останавливается у левого края заголовка;
• иконки на фоне должны появляться после заголовка и описания;
• после фона с иконками плавно появляется кнопка;
• при наведении на кнопку, она плавно меняет фон.

4. Доработайте пункт 3, чтобы в конце всей анимации все элементы баннера кроме фона плавно исчезали, затем анимация должна начинаться сначала. Смена итераций должна быть плавной без резких скачков.

Творческое (контрольное) задание

Создать рекламный баннер средствами HTML и CSS3

Требования к баннеру

1. Размер не менее 1000px по ширине.

2. Наличие фонового изображения, заголовка и рекламного текста.

3. Должны быть использованы следующие свойства css анимации

• transition
• rotate
• scale
• skew
• перемещение текста (или изображений)

4. Анимация баннера должна быть повторяющейся, переход от итерации к итерации должен быть плавным без резких скачков.

На основании приведенных выше требований Вам необходимо предварительно подобрать материалы (фото, тексты), продумать сценарий анимации.

Анимация шестеренок

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

Для этого урока я использовал программу Macromedia Flash Professional 8.

Чтобы реализовать этот урок, вам понадобиться изображение шестеренки с прозрачным фоном, для этого вы можете скачать ее в инете или воспользоваться кистью "Шестеренки" для Photoshop, как это сделал я.

1 Создаем новый документ с нужными параметрами.

2 Импортируем в библиотеку программы свое изображение шестеренки.

3 Перетаскиваем на сцену свое изображение шестерни.

4 Выбираем инструмент "Free Transform Tool (Q)"и по необходимости уменьшаем или увеличиваем им наше изображение, главное зажмите кнопку "Shift" перед трансформацией, чтобы получился круг, а не овал.

5 Выбираем наше зубчатое колесо инструментом "Selection Tool (V)" и нажимаем кнопку "F8", чтобы преобразовать его в "Movie Clip" и называем его "zub_mc".

6 Пока шестеренка еще выбрана идем в панель "Properties" и там присваиваем мувику уникальное имя (идентификатор) название нашего "Movie Clip"

7 Теперь перетащите еще 4 колеса на сцену, изменяя их размеры и каждое из них преобразовываем в "Movie Clip" под разными названиями и в панели "Properties" также прописываем название для каждого колеса.

8 Создайте новый слой и назовите его (Actions).

9 Выбираем 1 кадр слоя "Actions", нажимаем кнопку "F9", чтобы открыть панель "Actions" и вводим туда следующий код:

Идем в верхнее меню, в пункт "Control — Test Movie", чтоб посмотреть результат проделанной работы.