단순한 상태 변화를 넘어 웹 요소에 연속적이고 자율적인 생명력을 불어넣는 CSS Animation에 대해 알아보겠습니다.transition이 A에서 B로 가는 일회성 변화라면, animation은 여러 단계를 거치거나 무한히 반복되는 복잡한 움직임을 구현할 때 사용합니다.1. @keyframes (애니메이션의 설계도)애니메이션을 만들려면 먼저 시간의 흐름에 따른 스타일 변화를 정의해야 하는데, 이를 @keyframes라고 부릅니다.정의: 애니메이션의 이름과 각 시점(%)별 스타일을 지정합니다.시점: 0%(시작, from)부터 100%(끝, to)까지 원하는 구간을 쪼개어 설정할 수 있습니다.CSS @keyframes slideAndColor { 0% { transform: translateX(0); b..