Анимация на основе временной шкалы просмотра для разных элементов ⇐ CSS

[Anonymous]

Я пытаюсь анимировать элемент B на основе свойства view-timeline, установленного для элемента A. С помощью view-timeline можно вызывать анимацию на основе положения элемента в области просмотра, если тогда шкала времени просмотра устанавливается на шкале анимации.
MDN явно заявляет:

Затем имя упоминается в объявлении анимации-временной шкалы, чтобы указать элемент, который будет анимироваться по мере продвижения временной шкалы. Это может быть элемент темы, но это не обязательно — вы можете анимировать другой элемент по мере перемещения объекта по области прокрутки.

Таким образом, должна быть возможность анимировать элемент B (скажем, вращая его или изменяя цвет фона), установив временную шкалу анимации этого элемента на временную шкалу просмотра другого элемента A (субъект):

Код: Выделить всё

Код: Выделить всё

.container{
min-height:200vh;
}

.fixed {
position:fixed;
right:50px;
top:50px;
}

.square{
height:100px;
width:100px;
}

#A{
background-color:green;
margin-top:50%;
view-timeline: --aTimeline y;
}

#B{
background-color:red;
animation-timeline: --aTimeline;
animation-name: slideInFixedSquare;
animation-fill-mode: both;
animation-duration: 1ms;
}

@keyframes slideInFixedSquare {
from {
opacity: 0;
transform: scaleX(0);
}

to {
opacity: 1;
transform: scaleX(1);
}
}

Похоже, что анимация на B работает, только если B является потомком A, хотя в документации (mdn) это явно не указано. Кто-нибудь знает, как заставить эту анимацию работать, даже если B не является потомком A?


Подробнее здесь: https://stackoverflow.com/questions/791 ... nt-element