<div id="readability-page-1" class="page"><div id="body"> <p> <a href="/blog/category/dev">dev</a> |
2025-08-09 </p>  <div><p>시작은 제이쿼리로 되어 있는 코드를 바닐라로 변환이 필요해서 였다. 화면에서 보이지 않다가 특정 조건에서 화면에 나오는 애니메이션을 보여주는 기능이었다. 챗지피티에 물어보니 전반적인 변환은 잘 해줬는데 화면에 나오기 직전에 <code>display: none</code>을 <code>block</code>로 바꿔주다 보니 트랜지션 애니메이션이 작동하지 않았다. <code>element.offsetWidth;</code>같이 레이아웃을 참조하면 애니메이션이 되지만 다른 방법은 없는지 제미나이에게 물어보니 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/animate"><code>element.animate</code></a>를 사용해서 변환을 했다. <code>display</code> 조작의 영향을 받지 않고 의도대로 작 작동한다.</p>

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

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

<p><a href="https://caniuse.com/mdn-api_element_animate">나온지 10년</a>이 다 되어가는데 잘 모르고 있었다. CSS로 애니메이션을 제어하는 것을 선호하기는 하는데 동적으로 변경되는 애니메이션을 만들어야 할 때에 유용하게 사용할 수 있다. <a href="https://caniuse.com/mdn-api_element_animate_options_timeline_parameter">타임라인</a>이나 <a href="https://caniuse.com/mdn-api_element_animate_options_rangestart_parameter">레인지</a>도 정의할 수 있는데 파이어폭스가 아직 지원을 안한다.</p></div>      </div></div>

신현석(Hyeonseok Shin)

시작은 제이쿼리로 되어 있는 코드를 바닐라로 변환이 필요해서 였다. 화면에서 보이지 않다가 특정 조건에서 화면에 나오는 애니메이션을 보여주는 기능이었다. 챗지피티에 물어보니 전반적인 변환은 잘 해줬는데 화면에 나오기 직전에 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로 애니메이션을 제어하는 것을 선호하기는 하는데 동적으로 변경되는 애니메이션을 만들어야 할 때에 유용하게 사용할 수 있다. 타임라인이나 레인지도 정의할 수 있는데 파이어폭스가 아직 지원을 안한다.

웹 애니메이션 API

댓글