В какой момент определяется финальное положение анимации

В какой момент определяется финальное положение анимации

Этот вопрос касается CSS animations, transitions и Web Animations API. Финальное положение элемента определяется в разных моментах в зависимости от типа анимации и её характеристик.

CSS Transitions: Финальное положение

Для CSS transitions финальное положение определяется на момент завершения transition:

const box = document.querySelector(".box");

// Начальное состояние
box.style.left = "0px";
box.style.transition = "left 2s ease-in-out";

// Запускаем transition
box.style.left = "200px"; // Финальное положение уже определено!

// Через 2 секунды элемент будет в положении 200px
setTimeout(() => {
  console.log(box.style.left); // "200px"
}, 2000);

Ключевой момент: финальное положение определяется в момент смены CSS свойства (когда меняется left с "0px" на "200px").

CSS Animations: Определение через @keyframes

Для CSS animations финальное положение берётся из последнего keyframe или from/to:

/* Финальное положение — это конец анимации (100%) */
@keyframes slide {
  from { left: 0; }
  to { left: 200px; } /* Это финальное положение */
}

.box {
  animation: slide 2s ease-in-out forwards;
}

const box = document.querySelector(".box");

// Финальное положение уже определено в @keyframes (100%)
console.log(box.offsetLeft); // После анимации будет 200px

Важный момент: animation-fill-mode

/* forwards — остаётся в финальном состоянии */
.box { animation: slide 2s forwards; }

/* backwards — возвращается в начальное состояние */
.box { animation: slide 2s backwards; }

/* both — оба эффекта */
.box { animation: slide 2s both; }

/* none — возвращается в исходное */
.box { animation: slide 2s none; }

Web Animations API: Точный контроль

При использовании Web Animations API финальное положение контролируется через эффект:

const box = document.querySelector(".box");

const animation = box.animate(
  [
    { left: "0px", opacity: 1 },
    { left: "100px", opacity: 0.5 },
    { left: "200px", opacity: 1 } // Финальное положение
  ],
  {
    duration: 2000,
    easing: "ease-in-out",
    fill: "forwards" // Сохранить финальное состояние
  }
);

// Финальное положение определено в последнем keyframe
console.log(animation.effect.getTiming()); // Вся информация об анимации

Момент определения: Parsing vs Rendering

Финальное положение определяется на разных стадиях:

1. CSS Transitions — при применении стиля

// Момент 1: CSS парсится
const style = document.createElement("style");
style.textContent = `.box { transition: left 2s; }`;
document.head.appendChild(style);

// Момент 2: Начальное состояние установлено
box.style.left = "0px"; // 0px — исходное

// Момент 3: ЗДЕСЬ определяется финальное положение
box.style.left = "200px"; // 200px — финальное
// Browser видит изменение: 0px -> 200px с transition
// Финальное положение = 200px (уже известно!)

2. CSS Animations — при запуске

// Момент 1: @keyframes парсится
const style = document.createElement("style");
style.textContent = `
  @keyframes slide {
    to { left: 200px; }
  }
  .box { animation: slide 2s; }
`;
document.head.appendChild(style);

// Момент 2: Анимация запускается
// Финальное положение УЖЕ известно из @keyframes
// = 200px

3. Web Animations API — при вызове animate()

// Финальное положение определяется в момент вызова animate()
const animation = box.animate(
  [{ left: "0px" }, { left: "200px" }],
  2000
);

// В момент вызова animate() финальное положение уже известно
console.log("Финальное положение: 200px");

Computed vs Actual Position

const box = document.querySelector(".box");

// Начало transition
box.style.left = "0px";
box.style.transition = "left 2s";

requestAnimationFrame(() => {
  box.style.left = "200px";
  
  // Во время анимации:
  const computed = window.getComputedStyle(box).left;
  console.log(computed); // Например: "50px" (текущая позиция)
  console.log(box.style.left); // "200px" (финальное положение)
});

Финальное положение в стилях (box.style.left) определено СРАЗУ! Текущее положение (computed) меняется во время анимации.

Практический пример: изменение финального положения

const box = document.querySelector(".box");

box.style.transition = "left 2s";
box.style.left = "200px"; // Финальное положение = 200px

// Через 0.5 секунд меняем финальное положение
setTimeout(() => {
  box.style.left = "300px"; // Новое финальное положение!
  // Browser перезагрузит анимацию от текущей позиции к 300px
}, 500);

Это создаёт плавный переход от текущей позиции (примерно 100px) к новому финальному положению (300px).

getAnimations() и playState

const box = document.querySelector(".box");

const animation = box.animate(
  [{ transform: "translateX(0)" }, { transform: "translateX(200px)" }],
  { duration: 2000, fill: "forwards" }
);

// Финальное положение можно получить:
const keyframes = animation.effect.getKeyframes();
const finalKeyframe = keyframes[keyframes.length - 1];
console.log(finalKeyframe.transform); // "translateX(200px)"

// Можно проверить, заканчится ли анимация
animation.onfinish = () => {
  console.log("Анимация завершена");
  console.log("Финальное положение достигнуто");
};

Важные моменты

CSS Transitions:

• Финальное положение определяется в момент изменения CSS свойства
• Это значение в DOM, а не расчитанное значение
• Можно менять во время анимации

CSS Animations:

• Финальное положение определяется в момент парсинга @keyframes
• Находится в последнем keyframe (100% или to)
• Фиксировано для всей длительности анимации

Web Animations API:

• Финальное положение определяется в момент вызова animate()
• Находится в последнем кадре массива keyframes
• Можно программно изменить через effect.setKeyframes()

Заключение

Финальное положение анимации определяется на момент инициализации:

• Transitions — когда меняется CSS свойство
• Animations — когда парсится @keyframes
• Web Animations API — когда вызывается animate()

В браузере это положение зафиксировано в DOM (в style атрибуте или @keyframes), а текущая позиция (computed) меняется во время анимации согласно timing function.