CSSTransition

Интерфейс CSSTransition API анимирования веб-страниц представляет собой объект Animation, используемый для CSS-перехода.

Этот интерфейс наследует свойства от своего родителя, Animation.

CSSTransition.transitionProperty Только для чтения

Возвращает имя свойства CSS-перехода в виде строки.

Этот интерфейс наследует методы от своего родителя, Animation.

Нет специфических методов.

Переход в следующем примере изменяет ширину блока при наведении курсора. Вызов Element.getAnimations() возвращает массив всех объектов Animation. В нашем случае это возвращает объект CSSTransition, представляющий созданную анимацию.

.box {
  background-color: #165baa;
  color: #fff;
  width: 100px;
  height: 100px;
  transition: width 4s;
}

.box:hover {
  width: 200px;
}

const item = document.querySelector(".box");
item.addEventListener("transitionrun", () => {
  let animations = document.querySelector(".box").getAnimations();
  console.log(animations[0]);
});