Подобно функциям времени для переходов, функции времени для анимации могут использовать ключевые слова, такие как linear, ease-out или могут быть определены с помощью произвольных кривых Безье.
.selector { animation-timing-function: ease-in-out; }
Значение по умолчанию: ease.
Animation-delay
Как и с задержкой перехода, задержка анимации может быть установлена в секундах (1s) или миллисекундах (200ms).
По умолчанию равно 0s, что означает отсутствие любой задержки.
Полезно использовать, когда включается несколько анимаций в серии.
.a,.b,.c { animation: bouncing 1s; }
.b { animation-delay: 0.25s; }
.c { animation-delay: 0.5s; }
Animation-iteration-count
По умолчанию, анимация воспроизводится один раз. Можно задать три типа значений:
· целые числа, вроде 2 или 3;
· дробные числа, вроде 0.5, которые будут воспроизводить только половину анимации;
· ключевое слово infinite, которое будет повторять анимацию бесконечно.
.selector { animation-iteration-count: infinite; }
Animation-direction
Свойство animation-direction определяет, в каком порядке читаются ключевые кадры.
· normal: начинается с 0%, заканчивается на 100%, начинается с 0% снова;
· reverse: начинается со 100%, заканчивается на 0%, начинается со 100% снова;
· alternate: начинается с 0%, идёт до 100%, возвращается на 0%;
· alternate-reverse: начинается со 100%, идёт до 0%, возвращается на 100%.
Animation-fill-mode
Определяет, какие стили должны применяться к элементу, когда анимация не проигрывается. Например, после её завершения или при остановке. По умолчанию, в момент окончания анимации стиль элемента возвращается к исходному, свойство animation-fill-mode позволяет изменить это поведение и сделать так, чтобы стиль элемента оставался как у последнего ключевого кадра.
Значения:
· none — к элементу не применяются какие-либо стили;
· forwards — к элементу по окончанию анимации применяется стиль последнего ключевого кадра. Каким будет этот кадр в последовательности анимации зависит от комбинации значений свойств animation-direction и animation-iteration-count;
· backwards — к элементу применяется стиль первого ключевого кадра и он остаётся на протяжении периода заданного animation-delay. Первый ключевой кадр определяется на основании значения animation-direction;
· both — к элементу применяются оба правила, как для forwards, так и для backwards.
Animation-play-state
Свойство управляет проигрыванием и остановкой анимации. Остановка анимации внутри цикла возможна через использование этого свойства в скрипте JavaScript. Также можно останавливать анимацию при наведении курсора мыши на объект —:hover.
Значения:
· paused — Останавливает анимацию;
· running — Значение по умолчанию, означает проигрывание анимации;
· initial — Устанавливает значение свойства в значение по умолчанию;
· inherit — Наследует значение свойства от родительского элемента.
Синтаксис:
div:hover {animation-play-state: paused;}
Множественные анимации
Для одного элемента можно задавать несколько анимаций, перечислив их названия через запятую, например:
div {animation: shadow 1s ease-in-out 0.5s alternate, move 5s linear 2s;}
Медиа-запросы
В 2001 году в HTML4 и CSS2 была введена поддержка аппаратно-зависимых таблиц стилей, позволившая создавать стили и таблицы стилей для определенных типов устройств. Таким образом, браузер применял таблицу стилей только в случае, когда активизировался данный тип устройства.
Медиа-запрос
В общем случае медиа-запрос состоит из ключевого слова, описывающего тип устройства (необязательный параметр) и выражения, проверяющего характеристики данного устройства. Чаще всего проверяется ширина устройства width.
Медиа-запрос является логическим выражением, которое возвращает истину или ложь.
Медиа-запросы могут быть добавлены следующими способами:
1. С помощью HTML:
<link rel="stylesheet" media="screen and (color)" href="example.css">
2. С помощью правила @import внутри элемента <style> или внешней таблицы стилей:
@import url(color.css) screen and (color);
3. Непосредственно в коде страницы:
<style>
@media (max-width: 600px) {
#sidebar {display: none;}
}
</style>
4. Внутри таблицы стилей style.css:
@media (max-width: 600px) {
#sidebar {display: none;}
}
Логические операторы
С помощью логических операторов можно создавать комбинированные медиа-запросы, в которых будет проверяться соответствие нескольким условиям.
Оператор and — связывает друг с другом разные условия:
@media screen and (max-width: 600px) {
/* CSS-стили */;
}
Стили этого запроса будут применяться только для экранных устройств с шириной области просмотра не более 600px.
@media (min-width: 600px) and (max-width: 800px) {
/* CSS-стили */;
}
Стили этого запроса будут применяться для всех устройств при ширине области просмотра от 600px до 800px включительно.
Оператор запятая — работает по аналогии с логическим оператором or (или).
@media screen, projection {
/* CSS-стили */;
}
В данном случае CSS-стили, заключенные в фигурные скобки, сработают только для экранных или проекционных устройств.
Оператор not — позволяет сработать медиазапросу в противоположном случае. Ключевое слово not добавляется в начало медиазапроса и применяется ко всему запросу целиком, т.е. запрос:
@media not all and (monochrome) {...}
будет эквивалентен запросу
@media not (all and (monochrome)) {...}
Если медиазапрос составлен с использованием оператора запятая, то отрицание будет распространяться только на ту часть, которая идет до запятой, т.е. запрос
@media not screen and (color), print and (color)
будет эквивалентен запросу
@media (not (screen and (color))), print and (color)
Оператор only — используется, чтобы скрыть стили от старых браузеров (поддерживающих синтаксис медиа-запросов CSS2).
media="only screen and (min-width: 401px) and (max-width: 600px)"
Эти браузеры ожидают список медиа-типов, разделённых запятыми. И, согласно спецификации, они должны отсекать каждое значение непосредственно перед первым неалфавитно-цифровым символом, который не является дефисом. Таким образом, старый браузер должен интерпретировать предыдущий пример как media="only". Поскольку данного типа медиа-типа не существует, то и таблицы стилей будут игнорироваться.
Тип носителя
Тип носителя представляет собой тип устройства, например, принтеры, экраны.
Типы носителей делятся на:
· all — подходит для всех типов устройств.
· print — предназначен для страничных материалов и документов, просматриваемых на экране в режиме предварительного просмотра печати.
· screen — предназначен для экранов с цветным компьютерным монитором.
· speech — предназначен для синтезаторов речи.
Характеристики носителя
К характеристикам медианосителя относятся проверяемые параметры устройства. Значения, которые используются при задании характеристик, являются контрольными точками.
| Характеристики носителя | |
| Параметр | Описание |
| width | Проверяет ширину области просмотра. Значения задаются в единицах длины, px, em и т.д. Обычно для проверки используются минимальные и максимальные значения ширины (min-width или max-width) |
| height | Проверяет высоту области просмотра. Значения задаются в единицах длины, px, em и т.д. Обычно для проверки используются минимальные и максимальные значения высоты (min-height или max-height) |
| aspect-ratio | Проверяет соотношение ширины к высоте области просмотра. Широкоэкранный дисплей с соотношением сторон 16:9 может быть помечен как (aspect-ratio: 16/9). min-aspect-ratio проверяет минимальное соотношение, max-aspect-ratio — максимальное соотношение ширины к высоте области просмотра. |
| orientation | Проверяет ориентацию области просмотра. Принимает два значения: (orientation: portrait) и (orientation: landscape). |
| resolution | Проверяет разрешение экрана (количество пикселей). Также могут проверять количество точек на дюйм (dpi) или количество точек на сантиметр (dpcm), например, (resolution: 300dpi). |
| color | Проверяет количество бит на каждый из цветовых компонентов устройства вывода. Например, (min-color: 4) означает, что экран конкретного устройства должен иметь 4-битную глубину цвета. |
| color-index | Проверяет количество записей в таблице подстановки цветов. Значение указывается положительным числом, например, (color-index: 256). |
| monochrome | Проверяет количество битов на пиксель монохромного устройства. Значение задается положительным числом (min-monochrome: 8). |
Метатег viewport
С помощью метатега viewport можно контролировать размер окна просмотра и масштаб.
Страницы, адаптированные для просмотра на разных типах устройств, должны содержать в разделе <head> метатег viewport.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Свойство width определяет виртуальную ширину окна просмотра, значение device-width — физическую ширину устройства.
При первой загрузке страницы свойство initial-scale управляет начальным уровнем масштабирования, initial-scale=1 означает, что 1 пиксель окна просмотра = 1 пиксель CSS.