CSS :: Анимация
- Правило keyframes и его синтаксис
- Имя анимации, css-свойство animation-name
- Задержка анимации, css-свойство animation-delay
- Длительность анимации, css-свойство animation-duration
- Повторение анимации, css-свойство animation-iteration-count
- Направление анимации, css-свойство animation-direction
- Плавность анимации, css-свойство animation-timing-function
- Постановка анимации на паузу, css-свойство animation-play-state
- css-свойство animation-fill-mode
- Сокращенное css-свойство animation
- Создание эффекта перехода, css-свойство transition-property
- css-свойство transition-delay
- css-свойство transition-duration
- css-свойство transition-timing-function
- Сокращенное css-свойство transition
Правило keyframes и его синтаксис
Имеются в CSS и возможности для создания анимационных эффектов и различных визуальных переходов элементов из одного состояния в другое, которые реализуются за счет набора специальных свойств, отвечающих за продолжительность, направление, количество повторений эффектов и т.д.
Для того, чтобы указать для каких именно свойств элемента необходимо применять анимационные эффекты, используется отдельное правило @keyframes. Оно устанавливает ключевые кадры при анимации элемента, которые определяют поведение одного цикла анимации и представляют собой конкретные стилевые свойства элемента в ключевых точках анимации. Таким образом, анимация представляет собою не что иное, как переход от одного набора стилевых свойств элемента к другому. В простейшем случае используется два ключевых кадра, т.е. два набора стилевых свойств элемента, между которыми и происходит анимационный переход. Формат записи правила имеет вид.
@keyframes имя_анимации{ a%{ св-во_1: начальное_значение_св-ва; св-во_2: начальное_значение_св-ва; ... } b%{ св-во_1: промежуточное_значение_св-ва; св-во_2: промежуточное_значение_св-ва; ... } ... c%{ св-во_1: конечное_значение_св-ва; св-во_2: конечное_значение_св-ва; ... } }
Здесь проценты отсчитываются от промежутка времени всей анимации. В простейшем случае при наличии всего двух ключевых кадров разрешается использовать вместо 0% ключевое слово from, а вместо 100% – ключевое слово to. Использование данного правила, а также свойств, устанавливающих параметры анимации, показано в примере №1. Наберите код в редакторе и в процессе чтения данного пункта поэкспериментируйте с различными вариантами значений анимационных свойств.
Имя анимации, css-свойство animation-name
Сами анимационные свойства записываются в отдельном от @keyframes правиле на общих основаниях с другими правилами CSS. А для того, чтобы привязать анимационные свойства к конкретной анимации, т.е. к правилу @keyframes, используется свойство animation-name, принимающее в качестве значений либо список имен анимаций, которые должны быть применены к элементу, либо ключевое слово none, которое используется по умолчанию и отменяет анимацию. Имена в списке анимаций должны перечисляться через запятую (см. пример №1).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Использование анимации</title> <style> p{ padding: 0px; width: 460px; height: 110px; border: solid 4px red; animation-name: example_1, example_2; animation-duration: 3s; animation-timing-function: ease-in-out; animation-delay: 700ms; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: backwards; } @keyframes example_1{ 0% { background: #ff0000; height: 0px; } 50% { background: #00ff00; height: 400px; } 100% { background: #0000ff; height: 200px; } } @keyframes example_2{ from { width: 0px; } to { width: 500px; } } </style> </head> <body> <p> </p> </body> </html>
Пример №1. Определение параметров анимации
Задержка анимации, css-свойство animation-delay
Перечислим все доступные анимационные свойства, используемые в CSS. Начнем с animation-delay, которое устанавливает время задержки перед запуском анимации (см. пример №1). В качестве значения свойство принимает время, указанное в секундах (s) или миллисекундах (ms). Если указано нулевое значение времени (используется браузером по умолчанию), то анимация запускается без задержек. Также разрешается использовать отрицательные значения, но с ними нужно быть осторожным, т.к. это может привести к изменению вида анимации в начальной стадии процесса.
Длительность анимации, css-свойство animation-duration
Чтобы установить продолжительность одного цикла анимации, необходимо использовать свойство animation-duration, которое также принимает в качестве значения время, указанное в секундах (s) или миллисекундах (ms). По умолчанию используется время равное нулю, что означает отсутствие анимации вообще. Отрицательные значения не разрешаются.
Повторение анимации, css-свойство animation-iteration-count
Количество повторений анимации можно задать при помощи свойства animation-iteration-count, которое принимает в качестве значений либо положительное число, указывающее количество повторений, либо ключевое слово infinite, означающее воспроизведение анимации бесконечное число раз (см. пример №1). При этом разрешается использовать не только целые значения, но и дробные. Например, если значение равно 1.5, то анимация совершит один полный цикл и потом завершится на половине второго цикла. По умолчанию анимация воспроизводится только один раз.
Направление анимации, css-свойство animation-direction
Помимо количества повторений анимации можно задать и ее направление. Делается это при помощи свойства animation-direction (см. пример №1), которое принимает значения в виде ключевых слов:
- normal – после завершения цикла, анимация сбрасывается в исходное состояние и стартует заново (используется по умолчанию);
- alternate – после завершения цикла, анимация начинает шаг за шагом воспроизводиться в обратном направлении;
- reverse – анимация начинается сразу с конца цикла, выполняя все шаги в обратном направлении, а затем сбрасывается опять в конец цикла;
- alternate-reverse – анимация начинается сразу с конца цикла, выполняя все шаги в обратном направлении, а затем начинает шаг за шагом воспроизводиться в прямом направлении, возвращаясь в конец цикла, который в данном случае является стартовой точкой.
Плавность анимации, css-свойство animation-timing-function
Управлять плавностью анимации (скоростью переходов от одного состояния к другому) позволяет свойство animation-timing-function (см. пример №1), которое использует значения математической функции Безье, а также значения пошаговой функции:
- cubic-bezier(n1,n2,n3,n4) – поведение анимации будет зависеть от результата вычисления функции Безье, в качестве аргументов которой можно задавать четыре числа от нуля до единицы включительно;
- ease – соответствует результату функции cubic-bezier(0.25,1,0.25,1); анимация ускоряется к середине, а затем замедляется к концу;
- ease-in – соответствует результату функции cubic-bezier(0.42,0,1,1); анимация начинает медленно ускоряться с самого начала и до конца;
- ease-out – соответствует результату функции cubic-bezier(0,0,0.58,1); анимация стартует ускоренно и замедляется к концу;
- ease-in-out – соответствует результату функции cubic-bezier(0.42,0,0.58,1); анимация медленно стартует и медленно заканчивается;
- linear – соответствует результату функции cubic-bezier(0,0,1,1); постоянная скорость на всем промежутке воспроизведения;
- steps(n, start|end) – здесь n представляет собою положительное целое число, которое задает число шагов функции, а ключевые слова определяют когда эти шаги будут сделаны – в начале или в конце указанного промежутка времени;
- step-start – соответствует результату функции step(1,start); стилевые свойства элемента сразу же принимают конечные значения, при этом анимация как бы отсутствует;
- step-end – соответствует результату функции step(1,end); стилевые свойства элемента находятся в исходном состоянии указанное время, а затем скачком принимают конечные значения, при этом анимация как бы отсутствует.
Постановка анимации на паузу,
css-свойство animation-play-state
Если в определенный момент нужно поставить анимацию на паузу, следует воспользоваться свойством animation-play-state, которое определяет два состояния анимации:
- running – анимация проигрывается;
- paused – анимация поставлена на паузу.
Изменять значение свойства можно, например, при помощи JavaScript. При этом при постановке анимации на паузу, на экране пользователя будет отображаться текущее состояние анимации, а после снятия ее с паузы, анимация продолжит свое воспроизведение с момента постановки ее на паузу.
css-свойство animation-fill-mode
Немаловажным является вопрос о том, какие стили применять к элементу до и после анимации. Для таких случаев предусмотрено свойство animation-fill-mode (см. пример №1), которое может принимать следующие значения:
- backwards – во время старта анимации к элементу применяется стиль первого ключевого кадра, который будет сохраняться на весь период задержки анимации, установленный свойством animation-delay;
- forward – по окончании анимации к элементу применяется стиль последнего ключевого кадра;
- both – применяются оба значения: для момента запуска анимации применяется первое значение, т.е. backwards, а в момент финиша – второе, т.е. forward;
- none – данное значение применяется по умолчанию; стиль элемента до и после анимации остается неизменным, а если ранее было применено одно из значений backwards или forward, то их действия будут отменены.
Сокращенное css-свойство animation
Если необходимо задать сразу несколько параметров анимации, можно использовать сокращенное свойство animation (см. пример №2), в котором значения соответствующих анимационных свойств перечисляются через пробел в следующей последовательности: animation-name || animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction || animation-fill-mode || animation-play-state. Если значение какого-нибудь свойства не будет указано, то браузер применит значение по умолчанию. При этом нужно помнить, что данное сокращенное свойство позволяет привязать к стилю только одну анимацию. Указывать через запятую имена нескольких анимаций нельзя.
Анимационные, а также описываемые ниже транзитные свойства разрешается применять ко всем элементам, а также к псевдоэлементам ::before и ::after.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Сокращенное свойство animation</title> <style> p{ padding: 0px; width: 460px; height: 110px; border: solid 4px red; animation: example_1 3s ease-in-out 700ms infinite alternate backwards; } @keyframes example_1{ from { background: #00ff00; width: 0px; } to { background: #0000ff; width: 500px; } } </style> </head> <body> <p> </p> </body> </html>
Пример №2. Использование сокращенного свойства animation
Создание эффекта перехода,
css-свойство transition-property
Для простейших случаев анимации, когда требуется совершить плавный переход между двумя значениями какого-нибудь CSS-свойства, используется небольшой набор специальных транзитных свойств, являющихся в некотором смысле аналогом анимационных свойств. Транзитные свойства перечисляются в правиле на общих основаниях и срабатывают при каждом изменении целевого свойства. Рассмотрим этот вопрос подробнее.
Если для какого-нибудь свойства элемента требуется создать эффект перехода, чтобы изменения происходили не моментально, а постепенно согласно указанным параметрам, следует указать это свойство в качестве значения транзитного свойства transition-property. Если значений несколько, то их следует указывать через запятую. Кроме того, в качестве значений разрешается использовать ключевое слово none, которое указывает браузеру, что эффект перехода вообще не нужно применять ни к каким свойствам, а также ключевое слово all, которое указывает браузеру на создание эффекта перехода для всех анимируемых свойств в данном правиле. Использование транзитных свойств, показано в примере №3. Опять же, наберите код в редакторе и в процессе чтения данного пункта поэкспериментируйте с различными вариантами значений свойств.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Создание эффектов перехода</title> <style> p{ padding: 0px; width: 130px; height: 100px; border: solid 4px red; background-color: #00ff00; transition-property: width, background-color; transition-delay: 0.1s; transition-duration: 1s; transition-timing-function: ease; } p:hover{ cursor: pointer; background-color: #0000ff; width: 450px; } </style> </head> <body> <p>Наведите курсор!</p> </body> </html>
Пример №3. Создание эффектов перехода
css-свойство transition-delay
Для установки периода ожидания перед началом перехода используется свойство transition-delay (см. пример №3). В качестве значения свойство принимает время, указанное в секундах (s) или миллисекундах (ms). Если указано нулевое значение времени (используется браузером по умолчанию), то переход начинается без задержек. Также разрешается использовать отрицательные значения, но с ними нужно быть осторожным, т.к. это может привести к изменению вида перехода в начальной стадии процесса. Разрешается перечислять через запятую несколько значений промежутков времени для каждого из свойств, перечисленных в качестве значения в transition-property.
css-свойство transition-duration
Чтобы установить продолжительность перехода из начального состояния в конечное, необходимо использовать свойство transition-duration (см. пример №3), которое также принимает в качестве значения время, указанное в секундах (s) или миллисекундах (ms). Разрешается перечислять через запятую несколько значений промежутков времени для каждого из свойств, перечисленных в качестве значения в transition-property. По умолчанию используется время равное нулю, что означает отсутствие перехода вообще. Отрицательные значения не разрешаются.
css-свойство transition-timing-function
Разрешается также управлять скоростью перехода от одного состояния к другому. Для этого используется свойство transition-timing-function (см. пример №3), которое использует значения математической функции Безье, а также значения пошаговой функции. Все эти значения аналогичны принимаемым значениям анимационного свойства animation-timing-function, которые можно посмотреть (здесь).
Сокращенное css-свойство transition
Опять же, если необходимо задать сразу несколько параметров перехода, можно использовать сокращенное свойство transition, в котором значения соответствующих транзитных свойств могут быть перечислены через пробел в следующей последовательности: transition-property || transition-duration || transition-timing-function || transition-delay. Если значение какого-нибудь свойства не будет указано, то браузер применит значение по умолчанию. Если указать в качестве значения ключевое слово none, эффект перехода будет отменен. При этом нужно помнить, что данное сокращенное свойство позволяет применять один эффект перехода только к одному свойству. Указывать через запятую несколько имен свойств для перехода нельзя: необходимо указывать весь блок параметров для каждого отдельного свойства, перечисляя такие блоки через запятую, например, transition: width 1s ease 0.2s, background-color 1s ease-in 0.2s;.
Простейшие примеры анимации можно посмотреть на соответствующей странице нашего учебного сайта №1.
Быстрый переход к другим страницам
- Установка фона
- Анимация в CSS
- Свойство display
- Вернуться к оглавлению учебника