목록애니메이션 (1)

늘 겸손하게

HTML, CSS - CSS 애니메이션과 JS 애니메이션의 차이점

웹 사이트에 애니메이션 효과를 부여할 때 CSS의 'transition/animation' 속성을 사용할 수 있고 JS의 'setInterval()/requestAnimationFrame()'을 사용할 수 있습니다. 각각의 특징과 장단점이 존재하여 상황에 따라 알맞은 방식을 선택하여 사용해야합니다. CSS 애니메이션 간단한 애니메이션은 CSS의 transform의 translate를 사용해서 구현할 수 있습니다. 이를 JS로 구현하기 위해선 setInterval를 통해 계속해서 style.top과 style.left 속성을 변화시켜야하는데 이 속성은 브라우저의 렌더링을 유발시켜 부자연스러운 애니메이션이 생성됩니다. 장점 간단한 애니메이션을 간단히 수행 빠르고 CPU를 많이 소모하지 않음 외부 라이브러리 ..
Programming/HTML,CSS 2022. 8. 9. 17:53
이전 Prev 1 Next 다음