html.okpython.net
HTML и CSS для начинающих

CSS :: Анимация

Правило 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).

HTML Результат htmlCodes 
<!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.

HTML Результат htmlCodes 
<!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. Опять же, наберите код в редакторе и в процессе чтения данного пункта поэкспериментируйте с различными вариантами значений свойств.

HTML Результат htmlCodes 
<!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.

Быстрый переход к другим страницам

▲
▼