Использование правила keyframes

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

CSS-правило @keyframes управляет промежуточными шагами в последовательности анимации CSS, определяя стили для ключевых кадров (или путевых точек), расположенных в ней.

Правило @keyframes состоит из пользовательского имени и набора дескрипторов для каждой точки анимации. Дескрипторы используют значения from (эквивалентно 0%), to (эквивалентно 100%) и/или <процентное значение> для определения момента времени, к которому будет применяться правило. Каждый дескриптор содержит значения свойств, которые будут меняться на протяжении всей анимации. Общий синтаксис выглядит следующим образом:

@keyframes animationName {
  from {
    свойсво: значение1;
  }
  50% {
    свойство: значение2;
  }
  to {
    свойство: значение3;
  }
}

Количество шагов между начальным и конечным ключевыми кадрами, а также количество CSS-свойств внутри ключевого кадра может быть таким, какое вам необходимо.

Свойства CSS-анимации

После того как правило объявлено, вы можете использовать его имя в свойстве animation, применяемом к любому элементу HTML.

CSS-свойство animation применяет анимацию между стилями, используя заданный набор свойств.

Свойство animation задается как одна или несколько отдельных анимаций, разделенных запятыми (,). В полной нотации для одной анимации это выглядит следующим образом:

animation: <duration> <easing function> <delay> <iteration count> <direction> <fill mode> <play state> <@keyframes animation name>;

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

animation-delay

Указывает количество времени, которое необходимо подождать перед применением анимации к элементу.

animation-direction

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

animation-duration

Устанавливает время, необходимое анимации для завершения одного цикла.

animation-fill-mode

Настройка того, как CSS-анимация применяет стили к цели до и после ее выполнения.

animation-iteration-count

Настройки количества воспроизведений анимационной последовательности перед остановкой.

animation-name

Указывает имена одного или нескольких правил @keyframes, которые описывают анимацию, применяемую к элементу. Кратность правил @keyframes задается в виде списка имен, разделенных запятыми ( , ).

Если указанное имя не соответствует ни одному правилу @keyframes, анимация свойств не выполняется.

animation-play-state

Настройка того, запущена ли анимация или поставлена на паузу.

animation-timing-function

Настройка хода анимации в течение каждого цикла.

Значения времени задаются в секундах ( s ) или миллисекундах ( ms ).

Использование CSS-анимации

Давайте снова рассмотрим сценарий с компонентом Таймер из примера Применение CSS-переходов к компоненту, но на этот раз попробуем сделать что-то необычное, используя правило @keyframes и свойство animation.

Что может быть лучше, чем встроить таймер в Таймер?

  1. В UI Builder добавьте компонент Таймер на инструментальную панель, кликнув по нему в Палитре компонентов или перетащив его на макет.

  2. Откройте Редактор свойств, наведя курсор на компонент на макете и нажав кнопку Настроить () в правом верхнем углу появившегося оверлея, или выбрав его в Дереве компонентов.

  3. В Редакторе свойств переключитесь на вкладку Стиль элемента.

  1. На вкладке Стиль элемента добавьте базовые стили в свойство Стиль CSS элемента:

position: relative;
display: flex;
justify-content: center;
text-align: center;
width: fit-content;
margin: auto;
padding: 24px 16px;
border-radius: 8px;
overflow: hidden;
transform-origin: center center;
transition: 0.24s;

  1. В том же свойстве добавьте пару пока скрытых псевдоэлементов, чтобы показывать их только на увеличенном компоненте. Один из них предназначен для наложения, а другой - для обратного отсчета:

::before, ::after {
  content: "";
  display: block;
  position: absolute;
  opacity: 0;
  transition: 0.24s;
}

::before {
  color: white;
  font-size: 12px;
  font-weight: 800;
  z-index: 1;
}

::after {  
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: slategray; 
}

  1. Далее, продолжая работать со cвойством Стиль CSS элемента, добавьте анимационные последовательности для каждого из элементов. Первая - для самого компонента, она добавит отскок к анимации масштабирования:

@keyframes scaleup {
  0% {
    transform: scale(1);
    color: transparent;
  }
  25% {
    transform: scale(3.5);
  }
  50% {
    transform: scale(3);
  }
  75% {
    transform: scale(3.2);
  }
  100% {
    transform: scale(3);
    color: transparent;
  }
}

Вторая - для обратного отсчета:

@keyframes countdown {
  0% {
    transform: scale(0);
  }
  10% {
    content: "0:01";
    transform: scale(1.5);
    opacity: 1;
  }
  40% {
    content: "0:02";
    transform: scale(2);
  }
  100% {
    content: "0:03";
    transform: scale(3);
    opacity: 1;
  }
}

Последняя - для скрытия наложения по окончании обратного отсчета:

@keyframes dissapear {
  5% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

  1. Сейчас пришло время добавить стили и анимацию для состояния наведения для каждого элемента с помощью псевдокласса :hover:

:hover {
  transform: scale(3);
  color: firebrick;
  font-weight: 800;
  background-color: white;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16);
  animation: scaleup 0.4s ease-out 1;
}

:hover::before {
  animation: countdown 3s linear 1 reverse;
}

:hover::after {
  animation: dissapear 3s linear 1 forwards; 
}

  1. Проверьте получившееся взаимодействие на инструментальной панели. Текущий вариант, возможно, не очень практичен в реальном приложении, но является хорошим примером того, что возможно сделать с помощью анимацией ключевых кадров.