В какой момент определяется куда анимировать

Анимация определяется на этапе рендеринга браузером, когда применяются CSS-свойства или запускается JavaScript-анимация.

Для CSS-анимаций браузер анализирует:

1. Изменяемые свойства (например, transform, opacity)
2. Начальное и конечное состояние (из @keyframes или transition)
3. Приоритеты и каскадность стилей

Пример с CSS transition:

.box {
  transition: transform 0.3s ease;
}
.box:hover {
  transform: translateX(100px);
}

Для JS-анимаций (например, через Web Animations API) направление определяется в момент вызова:

element.animate([
  { transform: 'translateX(0)' }, 
  { transform: 'translateX(100px)' }
], { duration: 300 });

Браузер оптимизирует анимации, используя композитный слой, особенно для свойств типа transform и opacity.