admin / 16.08.2018
.
Свойство позволяет анимировать элементы страницы.
Можно управлять длительностью анимации, повторением, направлением, типом движения и шагами. Анимировать можно любые элементы, в том числе псевдо-элементы.
Обязательное условие — наличие конкретных значений. Свойства со значением не анимируются.
Спецификация: w3.org/TR/css3-animations
Сафари в настоящее время не поддерживает анимацию псевдоэлементов, для просмотра записи воспользуйтесь другими браузерами
Пример Css-анимации:
Пример кода анимации:
Подключение анимации:
— имя анимации — длительность — бесконечное повторение — тип движения
Содержание
Сама анимация задается внутри блока . После задается имя анимации, а потом внутри фигурных скобок — её шаги.
Шаги можно задавать через проценты или с помощью ключевых слов и .
При этом в шагах можно менять тип анимации ():
Используется для задания имени анимации.
Возможные значения: одно или несколько имен анимации. Значение по умолчанию: нет.
— одна анимация. — две анимации, имена задаются через запятую.
Длительностью анимации управляет свойство .
Возможные значения: время в секундах (s) или миллисекундах (ms). В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение — 0s.
Свойство определяет тип анимации.
Возможные значения:
Плавная анимация — скольжение (значение по умолчанию) — ровное движение — ускорение к концу — ускорение в начале — более плавное скольжение, чем
позволяет задавать сложный тип анимации.
Значения удобно подбирать на cubic-bezier.com.
Пошаговая анимация и — позволяют задать пошаговую анимацию, обязательно задавать конкретные шаги. При этом с изменения происходят в начале шага, а с — в конце.
. Если выставить , счетчик будет начинаться с единиц.
— позволяет задать количество шагов, за которые будет выполнена анимация, при этом можно задать только последний шаг без необходимости указывать промежуточные.
Управляет повторением анимации. Значение по умолчанию: 1 (анимация проигрывается один раз).
Возможные значения:
число — сколько раз проиграть анимацию. — бесконечное повторение.
Отвечает за направление анимации.
Возможные значения:
— анимация проигрывается в обычном направлении, с начала и до конца. — анимация проигрывается в обратном направлении, то есть с конца. — анимация проигрывается с начала и до конца, а затем в обратном направлении. — анимация проигрывается с конца до начала, а затем в обратном направлении.
Управляет остановкой и проигрыванием анимации.
Возможные значения: — анимация проигрывается (значение по умолчанию). — анимация застывает на первом шаге.
Управлять шагом, где будет остановка, не получается, но можно останавливать анимацию по :
С помощью можно задавать задержку анимации перед началом воспроизведения.
Возможные значения: время в секундах (s) или миллисекундах (ms). Значения могут быть отрицательными. В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение — 0s.
Свойство определяет будет ли анимация воздействовать на элемент вне времени воспроизведения анимации.
Возможные значения:
— анимация воздействует на элемент только во время воспроизведения, по окончании элемент возвращается в исходное состояние. — анимация воздействует на элемент по окончании воспроизведения. — анимация воздействует на элемент до начала воспроизведения. — анимация воздействует на элемент и до начала, и после окончания воспроизведения.
Чтобы увидеть как и работают до начала воспроизведения анимации, задана задержка . Так же для этого имеет смысл открыть пример в новом окне.
Все эти свойства можно записать с помощью короткой записи, например:
Обязательные значения — имя анимации и длительность. Первое временное значение считается длительностью воспроизведения, второе — задержкой.
Если вы нашли ошибку или неточность, вы можете отредактировать статью с помощью prose.io, а также можно написать мне в комментариях или в Twitter.
.
Урок по css анимации позволяет научиться создавать анимированные изображения без использования Flash. Эта технология постепенно вытесняет создание рекламных и других анимированных баннеров средствами Flash. В уроке рассказывается, как создать полноценный анимированный рекламный баннер средствами языка CSS3.
Для выполнения урока необходимо предварительноскачать исходные материалы
1. Создайте папку для выполнения упражнений.
2. Скопируйте в нее папку img со всеми необходимыми материалами.
Переходом в css анимации называется плавная смена свойств элемента при наведении на него курсора мыши. При использовании псевдокласса :hover изменение происходит мгновенно, transition же позволяет задать продолжительность и метод перехода.
transition: [свойство,] длительность;
Синтаксис:
transition: all 1s; //для всех свойств длительность перехода 1с
transition: background 0.5s; //для фона длительность перехода 0,5с
Пример. При наведении на элемент div с классом round-to-circle, он из квадрата преобразуется в круг, у него изменяется цвет фона и непрозрачность становится равной 1. Все это происходит плавно, в течение 0.3с, т.к. мы задали свойство transition.
Если это свойство не задано, то смена свойств будет происходить моментально.
Рис. 1
Рис. 2
Задание 1
1. Реализуйте этот пример. Сохраните файл под именем 01_perehod.html
2. Измените значение в секундах до 1.5 секунд. Обновите страницу. Оцените разницу.
Трансформация — это изменение вида элемента, к которым относятся следующие визуальные модификации: поворот, масштабирование, наклон и сдвиг. Чтобы сделать трансформацию, к селектору добавляется свойство transform, а в качестве значения пишется функция трансформации, и её параметры. В общем виде это записывается так:
transform: функция(параметры);
Поворачивает элемент на заданный угол
transform: rotate(α)
Здесь: α — угол поворота. Положительное значение поворачивает элемент по часовой стрелке, отрицательное против.
Синтаксис:
transform: rotate(90deg) //поворот по часовой на 90 градусов
transform: rotate(-180deg) //поворот против часовой на 180 градусов
Пример. При наведении на изображение, оно плавно поворачивается на 60 градусов по часовой стрелке.
Рис. 3
Рис. 4
Задание 2
1. Реализуйте этот пример. Сохраните под именем 02_rotate.html
2. Изменяйте значение в секундах. Оцените разницу.
Задаёт масштаб элемента по горизонтали и вертикали.
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. Изменяйте значение в секундах и величину трансформации. Оцените разницу.
Наклоняет элемент на заданное значение по горизонтали и вертикали в плоскости экрана.
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
Сдвигает элемент на заданное значение по горизонтали и вертикали в плоскости экрана.
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
Свойство animation позволяет создавать более сложные анимации. Эти анимации состоят из двух компонентов: стилевое описание анимации и набор ключей, определяющих начальное, конечное и, возможно, промежуточное состояние анимируемых стилей.
Создание css анимации начинается с установки ключевых кадров правила @keyframes. Кадры определяют, какие свойства, на каком шаге будут анимированы.
Синтаксис:
@keyframes название_анимации {
from {свойство: параметры;}
50% {свойство: параметры;}
to {свойство: параметры;}
}
Ключевые кадры создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно.
После объявления правила @keyframes, мы должны ссылаться на него в селекторе в свойстве animation.
Синтаксис, сокращенная запись:
h1 {
animation: название_анимации длительность [количество_повторений];
}
Обязательные параметры:
Дополнительный параметр
Таким образом для задания 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 анимации
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", чтоб посмотреть результат проделанной работы.
FILED UNDER : IT