이전 게시글에서 transition 속성을 활용한 마우스 오버 시의 모션 효과를 구현했습니다. 이번 게시글에서는 animation과 @keyframes라는 속성을 통해 사용자의 별다른 행동 없이도 미리 지정해 놓은 설정 값에 따라 자동으로 움직이는 모션을 배워보겠습니다. animation을 설정하기 위해서는 @keyframes라는 명령어를 이용해 해당 모션의 시작점과 끝점을 미리 설정해 놓은 뒤, animation 구문으로 @keyframes에서 설정했던 모션을 호출하는 방식으로 동작합니다. 우선 다음의 기본 사용규칙을 살펴보겠습니다. animation의 경우는 @keyframes의 설정 등 다소 사용방식이 복잡해 보일 수 있으므로 필수 구문이 잘 이해되지 않는다면 바로 해당 예제를 따라해보면서 anim..