Использование CSS-переходов

Автор веб-страницы может определить, какое свойство должно быть анимировано и каким образом. Это позволяет создавать сложные переходы. Однако некоторые свойства являются неанимируемыми, так как нет смысла их анимировать.

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

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

transition-property

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

transition-duration

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

transition-timing-function

Указывает функцию для определения того, как вычисляются промежуточные значения для свойств. Функции сглаживания определяют, как вычисляются промежуточные значения перехода. Большинство функций сглаживания могут быть указаны, предоставив график соответствующей функции, как определено четырьмя точками, определяющими кубический безие. Вы также можете выбрать сглаживание из справочника по функциям сглаживания.

transition-delay

Определяет, сколько времени ждать между моментом изменения свойства и началом перехода.

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

div {
  transition: <property> <duration> <timing-function> <delay>;
}

В этом примере выполняется переход размера шрифта в течение четырех секунд с задержкой в две секунды между моментом наведения курсора мыши на элемент и началом эффекта анимации:

#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}

CSS

.box {
  border-style: solid;
  border-width: 1px;
  display: block;
  width: 100px;
  height: 100px;
  background-color: #0000ff;
  transition:
    width 2s,
    height 2s,
    background-color 2s,
    rotate 2s;
}

.box:hover {
  background-color: #ffcccc;
  width: 200px;
  height: 200px;
  rotate: 180deg;
}

Если список значений для любого свойства короче, чем у других, его значения повторяются, чтобы они совпали. Например:

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}

Это обрабатывается так, как если бы это было:

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}

Аналогично, если список значений любого свойства длиннее, чем у transition-property, он усекается, поэтому, если у вас есть следующий CSS:

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}

Это интерпретируется как:

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}

Распространенное использование CSS — выделение пунктов меню при наведении курсора мыши. Легко использовать переходы, чтобы сделать эффект еще более привлекательным.

Сначала настроим меню с помощью HTML:

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact Us</a>
  <a href="#">Links</a>
</nav>

Затем создадим CSS для реализации внешнего вида нашего меню:

nav {
  display: flex;
  gap: 0.5rem;
}

a {
  flex: 1;
  background-color: #333;
  color: #fff;
  border: 1px solid;
  padding: 0.5rem;
  text-align: center;
  text-decoration: none;
  transition: all 0.5s ease-out;
}

a:hover,
a:focus {
  background-color: #fff;
  color: #333;
}

Этот CSS задает внешний вид меню, с изменением цветов фона и текста при наведении курсора мыши на элемент в состояниях :hover и :focus:

В этом примере показано, как можно анимировать свойства display и content-visibility. Это полезно для создания анимаций входа/выхода, когда, например, вы хотите удалить контейнер из DOM с display: none, но при этом заставить его постепенно исчезать с помощью opacity, а не мгновенно пропадать.

Поддерживающие браузеры анимируют display и content-visibility с использованием варианта типа анимации дискретной анимации. Это обычно означает, что свойства будут переключаться между двумя значениями на 50% во время анимации между этими значениями.

Однако есть исключение, когда анимация выполняется к/от display: none или content-visibility: hidden. В этом случае браузер будет переключаться между этими значениями таким образом, что анимируемое содержимое будет отображаться в течение всего времени анимации.

Например:

• При анимации display от none к block (или другому видимому display значению), значение переключится на block на 0% длительности анимации, чтобы оно было видимым на протяжении всей анимации.
• При анимации display от block (или другого видимого display значения) к none, значение переключится на none на 100% длительности анимации, чтобы оно было видимым на протяжении всей анимации.

При анимации этих свойств необходимо установить transition-behavior: allow-discrete для анимации. Это позволяет использовать анимации display/content-visibility.

При анимации display, необходимо использовать @starting-style для задания начальных значений свойств элемента, с которого вы хотите начать анимацию, когда элемент получает первое обновление стиля. Это необходимо для предотвращения неожиданного поведения. По умолчанию, CSS-анимации не запускаются при первом обновлении стиля элементов, когда они впервые появляются в DOM, что включает в себя изменение состояния display с none на другое состояние. Анимации content-visibility не нуждаются в указании начальных значений в блоке @starting-style. Это потому, что content-visibility не скрывает элемент из DOM, как это делает display: оно просто пропускает отображение содержимого элемента.

HTML

HTML содержит два <p> элемента с <div> между ними, которые мы будем анимировать от display none до block.

<p>
  Click anywhere on the screen or press any key to toggle the
  <code>&lt;div&gt;</code> between hidden and showing.
</p>

<div>
  This is a <code>&lt;div&gt;</code> element that transitions between
  <code>display: none; opacity: 0</code> and
  <code>display: block; opacity: 1</code>. Neat, huh?
</div>

<p>
  This is another paragraph to show that <code>display: none;</code> is being
  applied and removed on the above <code>&lt;div&gt; </code>. If only its
  <code>opacity</code> was being changed, it would always take up the space in
  the DOM.
</p>

CSS

html {
  height: 100vh;
}

div {
  font-size: 1.6rem;
  padding: 20px;
  border: 3px solid red;
  border-radius: 20px;
  width: 480px;

  display: none;
  opacity: 0;
  transition:
    opacity 1s,
    display 1s allow-discrete;
  /* Equivalent to
  transition: all 1s allow-discrete; */
}

.showing {
  opacity: 1;
  display: block;
}

@starting-style {
  .showing {
    opacity: 0;
  }
}

Обратите внимание на блок @starting-style, используемый для указания начального стиля анимации, и включение свойства display в список анимации с allow-discrete для него.

JavaScript

Наконец, мы добавим немного JavaScript для настройки обработчиков событий, которые будут запускать анимацию (через класс showing).

const divElem = document.querySelector("div");
const htmlElem = document.querySelector(":root");

htmlElem.addEventListener("click", showHide);
document.addEventListener("keydown", showHide);

function showHide() {
  divElem.classList.toggle("showing");
}

Результат

Код отображается следующим образом:

Анимации — это отличный инструмент для создания плавного отображения без необходимости в дополнительных действиях в JavaScript. Рассмотрим следующий пример.

<p>Click anywhere to move the ball</p>
<div id="foo" class="ball"></div>

Используя JavaScript, можно сделать так, чтобы эффект перемещения шарика в определенную позицию происходил плавно:

const f = document.getElementById("foo");
document.addEventListener(
  "click",
  (ev) => {
    f.style.transform = `translateY(${ev.clientY - 25}px)`;
    f.style.transform += `translateX(${ev.clientX - 25}px)`;
  },
  false,
);

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

.ball {
  border-radius: 25px;
  width: 50px;
  height: 50px;
  background: #c00;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 1s;
}

Вы можете использовать событие transitionend для обнаружения завершения анимации. Это объект TransitionEvent, который имеет два дополнительных свойства помимо обычного объекта Event:

propertyName

Строка, указывающая имя CSS-свойства, анимация которого завершилась.

elapsedTime

Число с плавающей точкой, указывающее количество секунд, в течение которого анимация выполнялась к моменту срабатывания события. Это значение не зависит от значения transition-delay.

Как обычно, вы можете использовать метод addEventListener() для отслеживания этого события:

el.addEventListener("transitionend", updateTransition, true);

Начальную фазу анимации вы можете обнаружить, используя transitionrun (срабатывает до любой задержки) и transitionstart (срабатывает после любой задержки), аналогичным образом:

el.addEventListener("transitionrun", signalStart, true);
el.addEventListener("transitionstart", signalStart, true);

• Интерфейс TransitionEvent и событие transitionend
• Использование CSS-анимаций