시작은 제이쿼리로 되어 있는 코드를 바닐라로 변환이 필요해서 였다. 화면에서 보이지 않다가 특정 조건에서 화면에 나오는 애니메이션을 보여주는 기능이었다. 챗지피티에 물어보니 전반적인 변환은 잘 해줬는데 화면에 나오기 직전에 display: none을 block로 바꿔주다 보니 트랜지션 애니메이션이 작동하지 않았다. element.offsetWidth;같이 레이아웃을 참조하면 애니메이션이 되지만 다른 방법은 없는지 제미나이에게 물어보니 element.animate를 사용해서 변환을 했다. display 조작의 영향을 받지 않고 의도대로 작 작동한다.

키프레임 애니메이션을 자바스크립트로 구성하는 느낌이다. element.animate(keyframes, options)와 같이 사용하면 간단하게 이용할 수 있다.

document.querySelector('div').animate([
	{ width: '100px' },
	{ width: '200px' },
], {
	duration: 500,
	fill: 'forwards',
	easing: 'ease'
});

나온지 10년이 다 되어가는데 잘 모르고 있었다. CSS로 애니메이션을 제어하는 것을 선호하기는 하는데 동적으로 변경되는 애니메이션을 만들어야 할 때에 유용하게 사용할 수 있다. 타임라인이나 레인지도 정의할 수 있는데 파이어폭스가 아직 지원을 안한다.