Статьи

Основы свойств анимации CSS3

Февраль 1, 2019

Во второй части этой серии о CSS3-анимациях мы подробно рассмотрим определение ключевых кадров и свойств элементов.

Определение ключевых кадров

В предыдущем уроке мы обсуждали ключевые кадры; точка в анимации, где указано известное состояние. Давайте создадим простой набор ключевых кадров, где background-color Сначала нам нужно определить правило @keyframes 

 @keyframes colorchange
{
	/* individual keyframes go here */
}

Я дал набору имя «colorchange». Вы можете использовать любое имя; держать его описательным, чтобы вы могли легко его идентифицировать.

Далее мы определяем отдельные ключевые кадры в процентных пунктах на протяжении всей анимации: 

 @keyframes colorchange
{
	0%   { background-color: #00F; /* from: blue */ }
	25%  { background-color: #F00; /* red        */ }
	50%  { background-color: #0F0; /* green      */ }
	75%  { background-color: #F0F; /* purple     */ }
	100% { background-color: #00F; /* to: blue   */ }
}

Хотя мы определили только background-color

0% — начальный ключевой кадр — вы также можете использовать ключевое слово from Конечный ключевой кадр — это 100% — вы также можете использовать ключевое слово to Обычно вы должны кодировать по крайней мере два ключевых кадра, хотя, если состояние вашего элемента по умолчанию было синим, вы можете пропустить начало и конец, например 

 @keyframes colorchange
{
	25%  { background-color: #F00; /* red        */ }
	50%  { background-color: #0F0; /* green      */ }
	75%  { background-color: #F0F; /* purple     */ }
}

Таким образом, вы можете определить по крайней мере 101 ключевой кадр между 0% и 100%. На самом деле, вы можете определить гораздо больше, используя процентные доли, такие как 12,3%, но, если ваша анимация настолько сложна, вы напрашиваетесь на неприятности!

Наконец, вам (в настоящее время) необходимо повторить весь блок с префиксом веб-набора для Chrome, Safari и Opera 15+: 

 @-webkit-keyframes colorchange
{
	0%   { background-color: #00F; /* from: blue */ }
	25%  { background-color: #F00; /* red        */ }
	50%  { background-color: #0F0; /* green      */ }
	75%  { background-color: #F0F; /* purple     */ }
	100% { background-color: #00F; /* to: blue   */ }
}

Обычно это должно быть помещено над кодом без префикса.

Применение анимации к элементам

Теперь вы можете применить свои ключевые кадры к любому количеству элементов, чтобы увидеть их в действии. В следующих разделах описаны стандартные свойства, но не забудьте также включить префиксные версии -webkit.

анимация имя

Свойство animation-name 

 #myelement
{
	animation-name: colorchange;
}

анимация, длительность

Как и transition-durationanimation-duration Следующие длительности идентичны: 

 #myelement p.one
{
	animation-duration: 3s;
}

#myelement p.two
{
	animation-duration: 3000ms;
}

анимация-временная функция

Как и transition-timing-functionanimation-timing-functionключевым кадрам, а не по всей анимации (при этом это редко заметно, если вы не перемещаете элемент). Есть несколько возможных значений:

  • легкость — по умолчанию; анимация начинается медленно, а затем быстро ускоряется. В средней точке он замедляется с той же скоростью и замедляется до остановки.
  • easy-in-out — похож на easy, но с более тонким ускорением и замедлением.
  • замедление — начинается медленно, но ускоряется и резко останавливается.
  • замедление — начинается быстро, но замедляется до остановки.
  • linear — постоянная скорость на протяжении всей анимации; часто лучше всего использовать для изменения цвета или непрозрачности.

Наконец, есть cubic-bezier Обратитесь к CSS3 Transitions: Bezier Timing Functions для более подробного описания.

анимации задержки

Как и transition-delayanimation-delay Следующее идентично: 

 #myelement p.one
{
	animation-delay: 0.5s;
}

#myelement p.two
{
	animation-delay: 500ms;
}

анимация-итеративный подсчет

animation-iteration-count По умолчанию один, но вы можете установить любое положительное целое значение (нулевое или отрицательное целое число никогда не будет воспроизводить анимацию). Кроме того, вы можете использовать infinite 

 #myelement p.one
{
	animation-iteration-count: 5;
}

#myelement p.two
{
	animation-iteration-count: infinite;
}

анимация-направление

animation-direction Можно использовать следующие ключевые слова:

  • normal воспроизводит анимационные ключевые кадры вперед с 0% до 100%
  • reverse
  • alternate
  • alternate-reversealternate

Сокращенное обозначение CSS

Давайте посмотрим на полное объявление анимации: 

 #myelement
{
	animation-name: colorchange;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-delay: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

Это много печатает, особенно если учесть версии с префиксом -webkit. Опять же, вы можете использовать один ярлык animation 

 #myelement
{
	-webkit-animation: colorchange 5s linear 1s infinite alternate;
	animation: colorchange 5s linear 1s infinite alternate;
}

Посмотреть результат …

Это начало, но попробуйте адаптировать его под свои анимации.

36
Share: