Обновлено: 25.04.2019 12:44

CSS - анимация

Свойство animation (для браузеров Chrome, Safari, Opera нужно использовать другое свойство: -webkit-animation) в CSS можно использовать для анимации многих свойств CSS, таких как цвет, фон, цвет, высота или ширина. Каждая анимация должна быть определена с помощью директивы @keyframes (для браузеров Chrome, Safari, Opera нужно использовать другую директиву: @-webkit-keyframes ), которая затем вызывается со свойством анимации.

Набор свойств, которые могут быть анимированы

background	background-color	background-position	background-size
border	border-bottom	border-bottom-color	border-bottom-left-radius
border-bottom-right-radius	border-bottom-width	border-color	border-left
border-left-color	border-left-width	border-right	border-right-color
border-right-width	border-spacing	border-top	border-top-color
border-top-left-radius	border-top-right-radius	border-top-width	bottom
box-shadow	clip	color	column-count
column-gap	column-rule	column-rule-color	column-rule-width
column-width	columns	filter	flex
flex-basis	flex-grow	flex-shrink	font
font-size	font-size-adjust	font-stretch	font-weight
height	left	letter-spacing	line-height
margin	margin-bottom	margin-left	margin-right
margin-top	max-height	max-width	min-height
min-width	opacity	order	outline
outline-color	outline-offset	outline-width	padding
padding-bottom	padding-left	padding-right	padding-top
perspective	perspective-origin	right	text-decoration-color
text-indent	text-shadow	top	transform
transform-origin	vertical-align	visibility	width
word-spacing	z-index

Свойство CSS - animation позволяет анимировать переходы от одной конфигурации стиля CSS в другую.

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

Существуют три ключевых преимущества использования CSS - анимации перед традиционными методами анимации, управляемыми скриптами:

Они просты в использовании для простых анимаций; Вы можете создавать их, даже не зная JavaScript.
Анимация работает хорошо, даже при умеренной загрузке системы. Простые анимации часто могут плохо работать в JavaScript (если только они не особенно качественно сделаны). Механизм рендеринга может использовать пропуски кадров и другие методы, чтобы поддерживать оптимальную производительность.
Предоставление браузеру управления последовательностью анимации позволяет ему оптимизировать производительность и эффективность, например, уменьшая частоту обновления анимаций, запущенных на вкладках, которые в настоящее время не отображаются.

Настройка анимации

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

Cвойства animation

animation-delay	animation-delay: 3s; animation-delay: 2s, 4ms;	Настраивает задержку между загрузкой элемента и началом последовательности анимации.
animation-direction	/* Единственная анимация / animation-direction: normal; animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse; / Множественные анимации / animation-direction: normal, reverse; animation-direction: alternate, reverse, normal; / Глобальные значения */ animation-direction: inherit; animation-direction: initial; animation-direction: unset;	Настраивает, должна ли анимация чередовать направление на каждом прогоне последовательности или сбрасываться до начальной точки и повторяться сама.
animation-duration	animation-duration: 6s; animation-duration: 120ms; animation-duration: 1s, 15s; animation-duration: 10s, 30s, 230ms;	Настраивает продолжительность времени, которое анимация должна выполнить для завершения одного цикла.
animation-iteration-count	animation-iteration-count: infinite; animation-iteration-count: 3; animation-iteration-count: 2.3; animation-iteration-count: 2, 0, infinite;	Настраивает количество повторений анимации; Вы можете указать бесконечное повторение анимации на неопределенный срок.
animation-name		Задаёт имя директивы @keyframes .
animation-play-state	/* Одна анимация / animation-play-state: running; animation-play-state: paused; / Множественные анимации / animation-play-state: paused, running, running; / Глобальные значения */ animation-play-state: inherit; animation-play-state: initial; animation-play-state: unset;	Позволяет приостановить и возобновить последовательность анимации.
animation-timing-function	/* Keyword values / animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-function: step-start; animation-timing-function: step-end; / Function values / animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: steps(4, end); / Multiple animations / animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); / Global values */ animation-timing-function: inherit; animation-timing-function: initial; animation-timing-function: unset;	Настраивает время анимации; То есть как анимация переходит через ключевые кадры, устанавливая кривые ускорения.
animation-fill-mode	forwards, backwards, both, none animation-fill-mode: none; animation-fill-mode: forwards; animation-fill-mode: backwards; animation-fill-mode: both; /* Several values may be given, separated by commas. / / Each applies for each animation in animation-name. */ animation-fill-mode: none, backwards; animation-fill-mode: both, forwards, none;	Настраивает, какие значения применяются анимацией до и после ее выполнения.

Пример:

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS Animations</title> <link rel="stylesheet" href="/css/style.css"> </head> <body> <h1>Animations</h1> <div id="div1">Rotate on hover</div> <div id="div2">Sliding ... Hover to stop</div> <hr> <div id="div3">Bounce in </div> </body> </html>

CSS

DIV{ display: inline-block; padding: 10px 20px; margin: 20px; border: 1px solid red; } #div1{ animation-duration: 1s; animation-iteration-count: infinite; animation-play-state: paused; animation-timing-function: linear; } #div1:hover{ animation-play-state: running; animation-name: div1; } @keyframes div1{ to{ transform: rotate(1turn); } } #div2{ animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-name: div2; animation-direction: alternate; } #div2:hover{ animation-name: resetAnimation; } @keyframes div2{ from{ position: relative; left: 0px; } to{ position: relative; left: 300px; } } #div3{ animation-duration: 5s; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-name: div3; } @keyframes div3 { 0% { transform: scale(0.1); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } } @keyframes resetAnimation { /* Reset animation : apply empty animation*/ }

Видео

WEB start

Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17

Наши преимущества

WEB основы

Регистрация на сайте

Дополнительные материалы