JS에서 Element 객체의 animate() 메서드로 opacity 변화를 준 요소는 이상하게도 다른 형제 요소들 보다 뒤로(?) 간다. animate()를 적용한 요소의 자식 요소에 높은 z-index를 주고 레이어로 띄웠는데 부모 요소의 형제 요소들 뒤로 숨겨진다. 파이어폭스, 크롬, 사파리 모두 같은 증상.

element.animate(
    [{opacity: 0}, {opacity: 1}],
    {
        duration: 200,
        fill: 'forwards',
        easing: 'ease-in-out'
    }
);

하지만 직접 style 프로퍼티를 수정하는 구식 방법에서는 문제가 없다.

element.style.opacity = '0';
element.style.transition = 'opacity .2s ease-in-out';
requestAnimationFrame(() => {
    element.style.opacity = '1';
});

모든 브라우저가 같은 증상을 보이니 이게 표준 동작인 걸까?