Статьи

CSS3 анимации

Февраль 4, 2018

Недавно я писал о переходах CSS3 и следующим шагом для этого является своего рода переходы CSS на стероидах: анимация CSS3 ( спецификация уровня 3 модуля анимации CSS ).

Что такое CSS-анимация?

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

Простой пример

Давайте посмотрим на код для простого примера CSS3 Animations :

.animation-container {
	-webkit-animation-name: movearound;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	-webkit-animation-timing-function: ease;
}

@-webkit-keyframes movearound {
	from {
		width: 200px;
		background: #f00;
		opacity: 0.5;
		-webkit-transform: scale(0.5) rotate(15deg);
	}
	to {
		width: 400px;
		background: #ffffa2;
		opacity: 1;
		-webkit-transform: scale(1) rotate(0deg);
	}
}

Есть ряд новых вещей, которые мы видим выше. Во-первых, элемент .animation-container имеет несколько свойств CSS, определяющих имя анимации (я вернусь к этому), сколько времени это займет, чтобы завершить, сколько раз он должен выполнить всю анимацию (ключевое слово бесконечное используется здесь), направление этого и функция ослабления.

Самая интересная часть здесь — это название анимации, которое, вопреки тому, во что вы можете верить, любое имя по вашему выбору. На это имя затем ссылаются в новой части, используя символ @ (и вендор-префикс), чтобы указать раздел ключевых кадров. Здесь вы можете установить начальные значения свойств CSS для элемента в анимации и конечные.

В этом примере элемент будет вращаться, чтобы быть прямым, постепенно увеличиваться и становиться в два раза шире в конце анимации.

Использование значений ключевых кадров и количества итераций

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

.animation-container {
	height: 60px;
	padding: 10px;
	/* Shorthand syntax */
	-webkit-animation: movearound 4s ease 3 normal;
}

@-webkit-keyframes movearound {
	0% {
		width: 200px;
		background: #f00;
		opacity: 0.5;
		-webkit-transform: scale(0.5) rotate(15deg);
	}
	30% {
		width: 300px;
		background: #f00;
		opacity: 1;
		-webkit-transform: scale(1.3) rotate(15deg);
	}
	60% {
		width: 100px;
		background: #00f;
		opacity: 0.3;
		-webkit-transform: scale(0.3) rotate(15deg);
	}
	100% {
		width: 400px;
		background: #ffffa2;
		opacity: 0.5;
		-webkit-transform: scale(1) rotate(0deg);
	}
}

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

В этом примере элемент начинается с малого, масштабируется большим, затем меньше, чем когда он начинался, а затем заканчивается нормальным размером. Это также дополняется некоторым вращением и изменением цвета фона.

Более сложный пример

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

Набор тестов CSS3

Выше тесты (за исключением листьев) и ряд других примеров CSS3 доступны на моем тестовом полигоне CSS3 , где я также пытаюсь найти альтернативные решения, чтобы заставить некоторые вещи работать и в IE.

Поддержка веб-браузера

CSS-анимации доступны только в веб-браузерах на основе WebKit, в основном это Google Chrome и Safari. Из того, что я слышал, у меня нет никаких признаков того, что какой-либо другой поставщик веб-браузера работает над этим. Однако, поскольку все, кроме Microsoft, решили реализовать переходы CSS, это выглядит следующим логическим шагом.

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

29
Share: