CSS3 애니메이션 효과 html5와 CSS3가 나오기 전에는 애니메이션을 만들기 위해서 자바스크립트를 이용해야 하는 경우가 대부분이었지만 이제는 CSS3의 효과만 이용해서도 간단하게 애니메이션 효과를 만들 수 있게 됐는데요. 이번 글에서는 그 내용들을 살펴보고 예제를 만들어서 직접 구현해보는 과정을 살펴보겠습니다.
animation에서 사용되는 속성은 얼마의 시간 동안 실행할지 지정해주는 duration 속성이 있고요. 어떤 요소에 특정 애니메이션을 적용하기 위해서 이름을 붙여주는 animation-name 속성입니다. 다시 말해 여러 개의 애니메이션을 정의할 수 있는 @keyframes 속성에서 aaa라는 애니메이션을 정의해 놨다면 특정 요소에서 animation-name 속성값에 aaa를 넣어주면 해당 애니메이션이 적용되는 건데요. 글로 정리하려니 조금 복잡하네요. ㅎㅎ 예제를 만들어서 살펴보겠습니다.
먼저 html 문서에서 본문에 상자(div)를 하나 만들겠습니다.
본문에 aaa라는 상자를 하나 넣고 가로와 세로 각각 100px로 크기를 지정한 후 빨간색을 입혔습니다.
이렇게 만들어진 aaa라는 요소를 오른쪽으로 자연스럽게 움직이도록 하는 애니메이션을 만들어보겠습니다. 먼저 @keyframes 속성에서 애니메이션을 정의하겠습니다.
@keyframe 속성에 작성하면 되고요. 이름은 'move'로 정해봤습니다. 그리고 시작 지점을 의미하는 0%와 끝나는 지점을 의미하는 100%의 값들에 각각 시작과 끝나는 곳의 좌표를 입력습니다. 이때 0%와 100% 대신에 from과 to를 사용해도 되니 참고하시고요. 이렇게 간단하게 애니메이션을 만들 수 있습니다. 이제 이걸 aaa 요소에 적용해볼게요.
먼저 aaa라는 빨간 상자에 애니메이션을 적용하기 위해서 이 녀석의 위치가 고정되어 있지 않고 상대적으로 바뀔 수 있도록 position 값에 relative 값을 꼭 넣어줘야 합니다. 그리고 앞에서 정리한 내용대로 실행되는 시간인 animation-duration 값에 3초를 입력해봤습니다. 그리고 만들어 놓은 @keyframes move를 적용하기 위해서 animation-name 속성값에 move를 입력했습니다.
이렇게만 입력하고 브라우저에서 html 파일을 실행하면 빨간 상자는 왼쪽 10px에서 시작해서 400px 지점까지 3초 동안 시간에 맞춰서 이동하게 되는데요. 아주 간단한 내용이니까 직접 소스 코드 입력해서 확인해보셔요. 1분도 안 걸리면 입력할 수 있는 내용들이잖아요.^^
이렇게 해서 css3에서 움직이는 애니메이션 효과를 만드는 과정을 정리해봤습니다. 수고하셨어요.
