Ознакомление с CSS-анимацией (animation)

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

Анимация в CSS3 уже сегодня используется практически всеми современными веб-дизайнерами, несмотря на более высокие стандарты и требования к браузерам.

Поскольку эти новшества для многих остаются непонятыми, с помощью данного поста мы попробуем пролить свет на них.

 

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

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

  • keyframes – это ключевые кадры, которые используются для определения стилей для элемента в разные промежутки времени.
  • Свойства анимации – это те свойства, которые назначаются элементу с помощью ключевых кадров (@keyframes) и определяют то, как элемент будет анимироваться.

Анимация в CSS может применяться практически ко всем элементам в HTML5 (включая псевдоэлементы :before и :after).

animation присваивается определенному блоку в его «спокойном» (обычном) состоянии с помощью свойств анимации, которые можно использовать для анимации многих свойств CSS (например, цвет фона, высота или ширина). Поведение анимации определяется с помощью правил в ключевых кадрах (@keyframes).

 

Есть восемь свойств animation (в алфавитном порядке):

  • animation-delay – задает задержку перед началом анимации, в секундах
  • animation-direction – указывает на то, должна ли анимация воспроизводиться в обратном или чередующемся циклах (reverse или alternate)
  • animation-duration – определяет то, сколько секунд или миллисекунд требуется анимации для завершения одного цикла
  • animation-fill-mode – стиль для элемента, когда анимация не воспроизводится. Например, когда анимация завершилась или у нее задана задержка
  • animation-iteration-count – задает количество раз, которое должна воспроизводиться анимация (infinite – для бесконечного количества раз)
  • animation-name – определяет имя @keyframes анимации
  • animation-play-state – указывает на то, запущена ли анимация или приостановлена (running или paused)
  • animation-timing-function – определяет кривую скорости анимации

 

Весь синтаксис свойств анимации выглядит так:

div {
  animation-name: здесь название для ключевых кадров;
  animation-duration: продолжительность анимации в секундах или миллисекундах;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

А короткая запись свойств анимации выглядит так:

div {
  animation: nazvaniye-animaciyi 1.5s ease-out 0s alternate infinite none running;
}

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

 

Образец синтаксиса ключевых кадров @keyframes выглядит так:

@keyframes [название анимации] {
  0% { /* начальный кадр */    [свойство CSS]:[значение свойства];
  }
  100% { /* финальный кадр */    [свойство CSS]:[значение свойства];
  }
}

В правилах @keyframes можно использовать больше двух (начального и финального) ключевых кадров (например, промежуточные в отметке 30%, 75% и т.д.). Также в каждом ключевом кадре можно указывать достаточно большое количество свойств CSS.

 

Ниже представлен практический пример CSS кода для создания анимации большого красного круга.

div {
  background-color: red;
  border-radius: 50%;
  height: 250px;
  width: 250px;
  margin: 50px;
  animation: pulsirovaniye 2s ease infinite;
}
@keyframes pulsirovaniye {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

 

Демо-пример кода:

 

Смотрите больше примеров анимации в CSS с помощью ключевых кадров keyframes в нашем практическом уроке.

Практически все современные браузеры поддерживают это свойство, но для большей совместимости нужно использовать префиксы браузеров, причем стандартный синтаксис объявляется последним. Это относится и к свойству animation, и к правилам ключевых кадров keyframes:

div {
  -webkit-animation: [название кейфрейма] 3s infinite;
  -moz-animation:    [название кейфрейма] 3s infinite;
  -o-animation:      [название кейфрейма] 3s infinite;
  animation:         [название кейфрейма] 3s infinite;
}
@-webkit-keyframes [название кейфрейма] {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes [название кейфрейма] {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes [название кейфрейма] {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes [название кейфрейма] {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

Спасибо за внимание!

 

Recent Posts

Сравнение цен с конкурентами: зачем это нужно интернет-магазину

Содержание статьи Введение: почему цены решают все Что значит сравнение цен с конкурентами 5 причин,…

4 дня ago

Лучшие сауны Киева: проверенные адреса и актуальные цены

В последние годы интерес к саунам в Киеве заметно вырос. Это связано не только с…

5 дней ago

BaniSauny: быстрый гид по баням и саунам Киева

В современном ритме мегаполиса отдых стал неотъемлемой частью заботы о здоровье и эмоциональном состоянии. Особенно…

6 дней ago

Рекламный аккаунт Facebook: Как получить максимум от рекламы с Tech4You

В современном мире цифрового маркетинга Facebook (Meta) остается одной из самых мощных платформ для продвижения…

7 дней ago

Тактический тепловизор: назначение, особенности и преимущества

Этот прибор стал незаменимым элементом арсенала представителей множества профессий, но особенно актуален среди военных. Тепловизор…

2 недели ago

Как книги для саморазвития помогают «закрыть лишние мысли» и начать жить здесь и сейчас

Постоянный поток новостей, рабочих задач и личных забот часто приводит к тому, что в голове…

2 недели ago