[CSS] CSS 애니메이션 설명 및 예제

안녕하세요. gaki 입니다.

오늘은 CSS 애니메이션에 대해 이야기해보려 합니다.

 

MDN 에 나와있는 CSS 애니메이션의 정의를 인용하면

CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어집니다.

 

이라고 합니다.

 

CSS 애니메이션은 자바스크립트를 활용한 애니메이션보다 다음 세가지 이점을 가집니다.

1. 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있습니다.
2. 자바스크립트를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못할때가 있습니다. CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링됩니다.
3. 브라우저는 애니메이션의 성능을 효율적으로 최적화할 수 있습니다. 예를 들어 현재 안보이는 엘리먼트에 대한 애니메이션은 업데이트 주기를 줄여 부하를 최소화할 수 있습니다.

여기서 두번째 이점에 나와있는 frame-skipping 이란, 만약 컴퓨터의 하드웨어적인 한계가 존재할때, 1초에 랜더링 해야 하는 프레임수를 스킵하면서 최대한 부드럽게 화면을 랜더링 하는것을 말하는 것 같습니다.