belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...
CSS >>>

4.3. Использование анимации

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

Для того, чтобы указать для каких именно свойств элемента необходимо применять анимационные эффекты, используется отдельное правило @keyframes. Оно устанавливает ключевые кадры при анимации элемента, которые представляют собой конкретные стилевые свойства элемента в данный момент. Таким образом, анимация представляет собою не что иное, как переход от одного набора стилевых свойств элемента к другому. В простейшем случае используется два ключевых кадра, т.е. два набора стилевых свойств элемента, между которыми и происходит анимационный переход.

Формат записи правила имеет вид @keyframes имя_анимации {a% {св-во_1: начальное_значение_св-ва; св-во_2: начальное_значение_св-ва; ...} b% {св-во_1: промежуточное_значение_св-ва; св-во_2: промежуточное_значение_св-ва; ...} ... c% {св-во_1: конечное_значение_св-ва; св-во_2: конечное_значение_св-ва; ...}}, где проценты отсчитываются от промежутка времени всей анимации. В простейшем случае при наличии всего двух ключевых кадров разрешается использовать вместо 0% ключевое слово from, а вместо 100% – ключевое слово to. Использование данного правила, а также свойств, устанавливающих параметры анимации, показан рис. 4.11. Наберите код в редакторе и в процессе чтения данного пункта поэкспериментируйте с различными вариантами значений анимационных свойств.

Сами анимационные свойства записываются в отдельном от @keyframes правиле на общих основаниях с другими правилами CSS. А для того, чтобы привязать анимационные свойства к конкретной анимации, т.е. к правилу @keyframes, используется свойство animation-name, принимающее в качестве значений либо список имен анимаций, которые должны быть применены к элементу, либо ключевое слово none, которое используется по умолчанию и отменяет анимацию. Имена в списке анимаций должны перечисляться через запятую.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Использование анимации</title>
	<style>
		.background_1{
		padding: 0px;
		width: 460px;
		height: 110px;
		border: solid 4px red;
		animation-name: example_1, example_2;
		animation-delay: 2s;
		animation-duration: 3s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-timing-function: ease-in-out;
		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 class="background_1">	</p>
</body>
</html>

Пример 4.11. Определение параметров анимации

Перечислим все доступные анимационные свойства, используемые в CSS. Начнем с animation-delay, которое устанавливает время задержки перед запуском анимации. В качестве значения свойство принимает время, указанное в секундах (s) или миллисекундах (ms). Если указано нулевое значение времени (используется браузером по умолчанию), то анимация запускается без задержек. Также разрешается использовать отрицательные значения, но с ними нужно быть осторожным, т.к. это может привести к изменению вида анимации в начальной стадии процесса.

Чтобы установить продолжительность одного цикла анимации, необходимо использовать свойство animation-duration, которое также принимает в качестве значения время, указанное в секундах (s) или миллисекундах (ms). По умолчанию используется время равное нулю, что означает отсутствие анимации вообще. Отрицательные значения не разрешаются.

Количество повторений анимации можно задать при помощи свойства animation-iteration-count, которое принимает в качестве значений либо положительное число, указывающее количество повторений, либо ключевое слово infinite, означающее воспроизведение анимации бесконечное число раз. При этом разрешается использовать не только целые значения, но и дробные. Например, если значение равно 1.5, то анимация совершит один полный цикл и потом завершится на половине второго цикла. По умолчанию анимация воспроизводится только один раз.

Помимо количества повторений анимации можно задать и ее направление. Делается это при помощи свойства animation-direction, которое принимает значения в виде ключевых слов:

Управлять плавностью анимации (скоростью переходов от одного состояния к другому) позволяет свойство animation-timing-function, которое использует значения математической функции Безье, а также значения пошаговой функции:

Если в определенный момент нужно поставить анимацию на паузу, следует воспользоваться свойством animation-play-state, которое определяет два состояния анимации:

Изменять значение свойства можно, например, при помощи JavaScript. При этом при постановке анимации на паузу, на экране пользователя будет отображаться текущее состояние анимации, а после снятия ее с паузы, анимация продолжит свое воспроизведение с момента постановки ее на паузу.

Немаловажным является вопрос о том, какие стили применять к элементу до и после анимации. Для таких случаев предусмотрено свойство animation-fill-mode, которое может принимать следующие значения:

Если необходимо задать сразу несколько параметров анимации, можно использовать универсальное свойство animation, в котором значения соответствующих анимационных свойств перечисляются через пробел в следующей последовательности: animation-name || animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction || animation-fill-mode || animation-play-state. Если значение какого-нибудь свойства не будет указано, то браузер применит значение по умолчанию. При этом нужно помнить, что данное универсальное свойство позволяет привязать к стилю только одну анимацию. Указывать через запятую имена нескольких анимаций нельзя.

Анимационные, а также описываемые ниже транзитные свойства разрешается применять ко всем элементам, а также к псевдоэлементам ::before и ::after.

Для простейших случаев анимации, когда требуется совершить плавный переход между двумя значениями какого-нибудь CSS-свойства, используется небольшой набор специальных транзитных свойств, являющихся в некотором смысле аналогом анимационных свойств. Транзитные свойства перечисляются в правиле на общих основаниях и срабатывают при каждом изменении целевого свойства. Рассмотрим этот вопрос подробнее.

Если для какого-нибудь свойства элемента требуется создать эффект перехода, чтобы изменения происходили не моментально, а постепенно согласно указанным параметрам, следует указать это свойство в качестве значения транзитного свойства transition-property. Если значений несколько, то их следует указывать через запятую. Кроме того, в качестве значений разрешается использовать ключевое слово none, которое указывает браузеру, что эффект перехода вообще не нужно применять ни к каким свойствам, а также ключевое слово all, которое указывает браузеру на создание эффекта перехода для всех анимируемых свойств в данном правиле. Использование транзитных свойств, показан рис. 4.12. Опять же, наберите код в редакторе и в процессе чтения данного пункта поэкспериментируйте с различными вариантами значений свойств.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Создание эффектов перехода</title>
	<style>
		.background_1{
		padding: 0px;
		width: 130px;
		height: 50px;
		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 class="background_1">Наведите курсор!</p>
</body>
</html>

Пример 4.12. Создание эффектов перехода

Для установки периода ожидания перед началом перехода используется свойство transition-delay. В качестве значения свойство принимает время, указанное в секундах (s) или миллисекундах (ms). Если указано нулевое значение времени (используется браузером по умолчанию), то переход начинается без задержек. Также разрешается использовать отрицательные значения, но с ними нужно быть осторожным, т.к. это может привести к изменению вида перехода в начальной стадии процесса. Разрешается перечислять через запятую несколько значений промежутков времени для каждого из свойств, перечисленных в качестве значения в transition-property.

Чтобы установить продолжительность перехода из начального состояния в конечное, необходимо использовать свойство transition-duration, которое также принимает в качестве значения время, указанное в секундах (s) или миллисекундах (ms). Разрешается перечислять через запятую несколько значений промежутков времени для каждого из свойств, перечисленных в качестве значения в transition-property. По умолчанию используется время равное нулю, что означает отсутствие перехода вообще. Отрицательные значения не разрешаются.

Разрешается также управлять скоростью перехода от одного состояния к другому. Для этого используется свойство transition-timing-function, которое использует значения математической функции Безье, а также значения пошаговой функции. Все эти значения аналогичны принимаемым значениям анимационного свойства animation-timing-function, которые можно посмотреть (здесь).

Опять же, если необходимо задать сразу несколько параметров перехода, можно использовать универсальное свойство transition, в котором значения соответствующих транзитных свойств могут быть перечислены через пробел в следующей последовательности: [none | transition-property] || transition-duration || transition-timing-function || transition-delay . Если значение какого-нибудь свойства не будет указано, то браузер применит значение по умолчанию. Если указать в качестве значения ключевое слово none, эффект перехода будет отменен. При этом нужно помнить, что данное универсальное свойство позволяет применять эффект перехода только к одному свойству. Указывать через запятую несколько свойств для перехода нельзя.

Простейшие примеры анимации можно посмотреть на соответствующей странице нашего учебного сайта №1.

Контрольные вопросы и задания

  1. Для чего используется правило @frames? Как связать его с нужным набором анимационных свойств?
  2. Перечислите свойства, которые задают задержку перед анимацией, дительность анимации и количество циклов анимации.
  3. Как задать нужное направление и плавность анимации?
  4. Опишите свойства animation-play-state и animation-fill-mode.
  5. Опишите универсальное свойство, при помощи которого можно задать сразу несколько характеристик анимации.
  6. Для чего используются транзитные свойства? Перечислите их.
  7. К камим элементам разрешается применять анимационные и транзитные свойства?

Словарь новых английских слов

transparent [tranˈspar(ə)nt] – прозрачный, просвечивающийся.
repeat [rɪˈpiːt] – повторять.
cover [ˈkʌvə] – покрывать, накрывать, прятать.
contain [kənˈteɪn] – вмещать, содержать.
fixed [fɪkst] – неподвижный, закрепленный.
scroll [skrəʊl] – прокрутить, прокрутка.
local [ˈləʊk(ə)l] – местный, локальный.
origin [ˈɒrɪdʒɪn] – источник, начало, исходная точка.
attachment [əˈtatʃm(ə)nt] – прикрепление, привязанность.
clip [klɪp] – урезать, обрезать.
linear [ˈlɪnɪə] – линейный.
radial [ˈreɪdɪəl] – радиальный, лучевой.
gradient [ˈɡreɪdɪənt] – градиент, уклон.
closest [ˈkləʊsɪst] – ограниченный, закрытый.
farthest [ˈfɑːðɪst] – самый удаленный.
side [saɪd] – стенка, сторона.
corner [ˈkɔːnə] – угол.
duration [djʊˈreɪʃ(ə)n] – продолжительность, длительность.
delay [dɪˈleɪ] – задержка, отсрочка.
iteration [ɪtəˈreɪʃ(ə)n] – повтор, итерация.
count [kaʊnt] – счет, подсчет, итог.
infinite [ˈɪnfɪnɪt] – бесконечный.
direction [dɪˈrɛkʃ(ə)n] – направление.
alternate [ɔːlˈtɜːnət] – чередоваться, колебаться.
reverse [rɪˈvəːs] – направленный в обратную сторону.
ease [iːz] – легкость, свобода.
step [step] – шаг.
end [end] – конец.
state [steɪt] – состояние, положение.
running [ˈrʌnɪŋ] – бегущий.
paused [pɔːzd] – поставленный на паузу.
backwards [ˈbakwədz] – назад, в обратном направлении.
forward [] – вперед, дальше.
both [bəʊθ] – оба.
property [ˈprɒpəti] – свойство.
transition [tranˈzɪʃ(ə)n] – переход.

Комментарии (1)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
MikeBY
Печально что свойства transition не работают c background-image: linear-gradient/radial-gradient в браузерах Firefox и Chrome...Только в IE11 это сработало(( Может есть какие-то заплатки на это? Или только JS?
№7 от 2017-10-17 17:03:16
Нравится ()
Ответить
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх