안녕하세요 😊웹 개발에서 요소에 움직임을 줄 때 가장 많이 쓰는 기능이 바로 **트랜지션(transition)**과 **애니메이션(animation)**입니다.두 기능 모두 CSS만으로 멋진 효과를 낼 수 있지만, 헷갈리기 쉽습니다.오늘은 트랜지션과 애니메이션의 차이를 초보자도 쉽게 이해할 수 있도록 정리하고,실무에서 어떻게 활용하면 좋은지 예제와 함께 소개하겠습니다.📍 1. CSS 트랜지션(transition)상태 변화가 있을 때만 실행마우스를 올리거나, 클래스를 추가·제거할 때 동작짧고 단순한 효과에 적합예시: 버튼에 hover 시 색상 변경 button { background-color: #2196f3; color: #fff; padding: 10px 20px; border: none; ..
