웹사이트가 단순히 ‘보여주는 공간’이 아니라‘사용자와 상호작용하는 공간’으로 바뀌는 핵심 기술이 바로 CSS 애니메이션이다. 이번 글에서는 트랜지션(transition) 과 애니메이션(animation) 의 차이부터버튼 호버 효과, 로딩 스피너, 페이드인 효과 등실무에서 자주 쓰이는 예제 중심으로 완벽 정리했다. 💡 1. 트랜지션(transition) vs 애니메이션(animation) 구분 트랜지션 애니메이션 정의 상태 변화에 따른 자연스러운 전환 시간에 따라 반복적으로 변하는 동작 트리거 이벤트 발생 시 (hover, focus 등) 자동 또는 반복 실행 가능 선언 방식 transition: 속성 시간; @keyframes 정의 후 animation으로 적용 예시 버튼에 마우스를 ..