🌱 기초 프론트엔드
CSS 애니메이션이란?
쉽게 이해하기
플립북 만화책을 생각해보세요. 여러 장의 그림을 빠르게 넘기면 움직이는 것처럼 보이죠. CSS 애니메이션도 요소의 스타일을 시간에 따라 조금씩 바꿔서 부드러운 움직임을 만들어요.
핵심 정리
요소에 움직임이나 변화를 주는 CSS 기능이에요.
자세히 알아보기
CSS 애니메이션은 크게 두 가지 방법이 있어요. transition은 간단한 변화에 쓰고, animation은 복잡한 움직임을 만들 때 써요.
transition은 hover 같은 상태 변화가 일어날 때 부드럽게 전환되도록 해요. 예를 들어 버튼에 마우스를 올렸을 때 배경색이 뚝 바뀌는 게 아니라 0.3초에 걸쳐 서서히 바뀌게 만들 수 있죠. transition: all 0.3s ease; 이런 식으로 써요.
animation은 @keyframes로 정의해요. 0%부터 100%까지 각 시점에 어떤 스타일이어야 하는지 지정하면, 브라우저가 중간 과정을 자동으로 계산해서 부드럽게 움직여줘요. 로딩 스피너, 스크롤 인디케이터, 페이드인 효과 같은 걸 만들 때 필수예요.
실무에서는 성능도 중요해요. transform과 opacity는 애니메이션해도 성능이 좋지만, width나 height를 애니메이션하면 버벅일 수 있어요. 사용자 경험을 위해 적절한 애니메이션을 추가하되, 너무 과하면 오히려 방해가 되니 절제해서 쓰는 게 좋아요.