[260214] TIL

Today I Learned (2026-02-14)

CSS 애니메이션 핵심 정리

참고 링크

• animata.design
• 인파 블로그

transition

• 상태 변화 시 CSS 프로퍼티 값을 일정 시간 동안 부드럽게 바꿔주는 속성
• :hover나 JS 이벤트로 상태가 바뀔 때 자주 사용
• 자체적으로 스타일을 만드는 기능이 아니라, 변화 과정을 부드럽게 하는 기능

div {
  width: 100px;
  height: 50px;
  background-color: red;
  transition-property: width, background-color;
  transition-duration: 2s, 2s;
}

div:hover {
  width: 300px;
  background-color: blue;
}

animation (@keyframes)

• 시간 흐름에 따라 단계적으로 움직임을 정의할 수 있는 기능
• 반복, 방향, 지연 등 제어 옵션이 풍부함

transform

• 이동, 회전, 확대/축소, 비틀기 같은 기하 변형을 적용
• 자체 애니메이션 기능은 없으므로 transition과 함께 쓰는 경우가 많음

transform-origin

• 변형의 기준점 지정
• 예: 0 0(좌상단), 50% 50%(중앙), 100% 100%(우하단)

성능 관점

• transform, opacity, filter 기반 애니메이션이 비교적 성능 최적화에 유리하다.