CSS3 애니메이션 효과 지정하기
transition, transform 처럼 변형, 전환(화면이동) 효과도 멋진 기술이지만 CSS3에서 가장 눈에 띄는 변화 중의 하나는 바로 애니메이션 효과를 지정할 수 있다는 것입니다.
기존에는 변형, 전환인 2D, 3D의 효과를 주는 동안 시간을 주면 점차 모양이 바뀌는 것을 구현할 수는 있지만 이러한 효과를 주는 데 있어서 가장 제한이 되는 사항은 다음과 같은 것이 있습니다.
- 전환 효과의 시작과 끝만을 지정할 수 있다.
즉, CSS3 효과는 CSS의 특정 클래스나 구문을 지정하고 제거하는 방식으로 구현되기 때문에, 중간 모습(과정)에 대한 설명이 없습니다.
단순히 시작과 끝만을 지정할 수 있다는 의미입니다.
- 순차적인 효과를 적용하기 힘들다.
중간 단계를 지정할 수 없기 때문에 완급을 조정하거나 특정 시간에 따라 효과를 지정할 수 없습니다.
위와 같은 문제를 해결하기 위해서는 CSS3에서는 키 프레임(Key Frame)이라는 개념을 도입하였는데, 이것은 플래시 같은 도구에서 사용되는 것과 같은 개념입니다.
플래시에서는 도구를 통해 시간에 따라서 키 프레임 직접 지정하는 방식을 사용하지만 CSS3에서는 from, to 나 진행 상황에 따라 %를 지정하여 사용합니다.
정리하자면, 변형, 전환효과에서 가능한 구현 수준을 넘어, 좀 더 유연하고 세심한 조절이 가능한 애니메이션을 만들 수 있도록 해주는 것입니다.
CSS3 Animation
위에서 언급했듯이 애니메이션을 만들기 위해서는 가장 먼저 키 프레임을 설정해야 합니다.
키 프레임(Key Frame)은 전환(화면 이동) 효과가 발생하는 시작점과 종료점입니다.
가장 간단한 형태의 애니메이션은 시작 프레임과 종료 프레임이라는 2개의 키 프레임으로 만들어지지만, 좀 더 복잡한 애니메이션을 만들 경우에는 그 사이에 몇 개의 키 프레임을 더 추가하여 사용할 수 있습니다.
CSS 전환(화면 이동) 효과인 transition 은 사실상 2개의 키 프레임만을 사용한다고 할 수 있고 이 점이 애니메이션과 구분되는 점입니다.
CSS 에서 키 프레임은 @keyframes 규칙 속에 정의하며, 다음과 같은 문법을 사용합니다.
@keyframes 규칙의 첫 번째 값은 키 프레임의 이름(name)이며, 식별자 역할을 하는 이름을 통해 키 프레임이 호출되어 정의된 애니메이션이 동작하게 됩니다.
이름으로 어떤 내용을 정의해도 무방하지만, 가급적이면 애니메이션의 흐름상 연관성이 있는 이름을 붙이는 것이 좋으며, 연관성 있는 이름을 정의해 두면 나중에 여러 장의 키 프레임이 사용되더라도 특정 장면을 찾아내기 쉬울 것입니다.
다음 값인 keyframe 에서는 전체 애니메이션 시간 중에서 해당 키 프레임이 나타날 위치를 지정합니다.
여기에는 퍼센트(%)값이나 from 또는 to 중 하나의 키워드를 사용할 수 있습니다.(이때 사용되는 값은 0에서 100퍼센트 사이의 값이다)
이 부분에는 최소 2개의 키 프레임이 존재해야 하며, 애니메이션 상에서 고유의 위치만 지니고 있다면 키 프레임의 개수 제한은 없습니다.
각 키 프레임은 애니메이션의 특정 장면에서 선택된 요소에 적용된 하나의 CSS 선언 또는 일련의 선언을 담고 있습니다.
예제 코드를 통해 간단히 살펴보도록 합니다.
다음의 코드는 3개의 키 프레임을 사용한 것입니다.
위 코드를 간단히 설명하자면 애니메이션의 시작 부분에서 선택된 요소는 테두리 너비가 20px 인 외곽선을 지니고, 애니메이션 중반부에서 외곽선은 5px 줄어듭니다.
그리고 애니메이션의 마지막 부분에서 외관선은 1px 높이와 너비는 각각 100px, 200px 이 됩니다.
각 키 프레임 사이에서 요소의 모습은 점차 변화하게 되며, 애니메이션의 시작과 50퍼센트 부분에서 외곽선은 20px 에서 5px 로 부드럽게 바뀌게 될 것입니다.
자세히 살펴보면 마지막 프레임에서 테두리 값을 바꾸지 않았는데 이렇게 애니메이션 다음 키 프레임에 기존의 값을 바꾸지 않으면 애니메이션에 원래 적용되기로 했던 요소의 값이 그대로 상속되며, 애니메이션의 느낌은 크게 달라질 것입니다.
아직까지는 애니메이션이 실행되지 않을 것입니다.
애니메이션 속성
키 프레임을 설정하고 나면 애니메이션에 사용될 요소의 움직임을 제어할 차례입니다.
상당수의 애니메이션 속성은 화면이동(전환) 효과에서 사용한 속성과 동일한 문법을 사용하고 있습니다.
애니메이션 효과를 설정하는 순서
- 애니메이션 효과를 별도의 @-webkit-keyframes 라는 것으로 선언한다.
- 선언된 키 프레임에 이름과 애니메이션 상태에 따른 효과를 키 프레임마다 지정한다.
- 특정한 CSS나 자바스크립트를 이용해서 애니메이션을 사용할 수 있도록 추가한다.
지금까지 설명한 내용을 토대로 다음과 같은 간단한 애니메이션을 만들 수 있습니다.
현재 CSS 애니메이션은 웹킷 브라우저에서만 구현되므로, 위의 키 프레임 정의와 애니메이션의 속성을 사용할 때에도 -webkit- 접두사를 붙여서 사용해야 한다.
애니메이션 설정에 사용하는 속성들
앞의 예제 코드의 설정을 살펴보면 이 효과를 적용하기 위해서 animation-duration 속성을 3s, 즉 3초동안 expand 라는 이름의 애니메이션을 실행한다는 뜻으로 해석할 수 있습니다.
이러한 설정은 다음과 같은 속성을 가지고 지정할 수 있습니다.
- animation-name : 선언된 애니메이션 이름
- animation-duration : ms 단위로 실행되는 시간을 지정
- animation-timing-function : linear, ease 등의 시간에 따른 변화 가감속 속도를 지정
- animation-iteration-count : 애니메이션의 반복 효과 횟수 지정(기본값은 1로 지정되어 있음)
- animation-direction : 애니메이션이 반복되는 동안 실행되는 순서(기본은 normal, 반대라면 alternate)
- animation-delay : 애니메이션 실행 시작 전에 실행 지연(유예) 시간을 지정
- animation-fill-mode : 애니메이션의 적용 후에 대상의 상태를 지정(backward, forward, both, none)
- animation-play-state : 애니메이션 실행 중에 중지되었을 때 계속 진행하거나 멈추게 할 것인지를 지정
animation-name (이름 지정)
animation-name 속성은 @-webkit-keyframes 규칙에서 정의된 애니메이션을 지칭하는데 사용하고, 애니메이션 이름 속성에는 단 하나의 값만을 사용할 수 있습니다.
이름 이외에 사용할 수 있는 값은 요소에서 애니메이션이 진행되는 것을 막는데 사용하는 none 뿐입니다.
animation-duration (기간)
animation-duration 속성은 애니메이션의 기간을 지정하고, transition-duration 속성과 기능적으로 동일합니다.
transition-duration 속성과 마찬가지로 시간 값으로는 ms 또는 s 단위를 사용할 수 있으며 애니메이션의 진행을 막는 의미로 0을 사용할 수 있습니다.(시간 값으로 음수를 적용한 경우 이 값은 0으로 간주된다)
animation-timing-function (시간함수)
이 속성 역시 transition-timing-function 과 기능 면에서나 작성 문법면에서 동일합니다.
이 애니메이션 시간 함수 역시 cubic-bezier 함수를 사용할 수 있습니다. 이 값은 transition 글에서 확인해 보시기 바랍니다.
animation-delay (지연)
지연을 담당하는 속성으로 transition-delay 속성과 같은 역할을 담당하고 있습니다.
애니메이션 지연 속성에서도 ms 또는 s 단위의 시간 값을 사용하며, 이를 통해 애니메이션의 시작을 지연시킬 수 있습니다.
여기서 0은 지연 시간 없이 시작한다는 의미이며, transition-duration 과 마찬가지로, 음수의 값을 사용하면 그 시간만큼 애니메이션을 건너뛰고 진행합니다.
animation-iteration-count (반복횟수)
기본적으로 단 한번만 재생(원래대로 돌아가는 것까지 포함하면 두 번 재생)되는 화면이동(전환) 효과와 달리, 애니메이션은 재생 횟수에 제한이 없습니다.
animation-iteration-count 속성은 반복의 횟수를 설정하며, 다음과 같은 문법을 사용합니다.
위 문법에서 횟수(count)에는 수 또는 infinite라는 키워드를 사용합니다.
숫자를 사용하면 해당 횟수만큼 애니메이션이 반복되고, 기본 설정 값은 1이며 애니메이션은 처음부터 끝까지 재생된 뒤 멈추게 됩니다.
infinite 값이 적용되면 애니메이션은 무한 반복되며, 다른 조건에 따라 이 값이 변경되지 않는 한 계속 반복됩니다.
이 값에 0이나 음수를 사용하면 애니메이션은 재생되지 않습니다.
animation-direction (방향)
애니메이션은 일반적으로 시작 키 프레임에서부터 마지막 키 프레임 순으로 순차적으로 재생(전환효과와 같이)되지만 역순으로 재생시킬 수도 있습니다.
다시 말해, 애니메이션을 한 방향으로 재생하거나, 순차적인 방향과 반대 방향으로 즉, 양방향으로 재생할 수 있는 것입니다.
이를 위해 animation-direction 속성을 사용합니다.
방향 속성에서 키워드 값으로는 normal 또는 alternate 를 사용합니다.
기본 설정 값은 처음 장면에서 마지막 장면의 방향으로 재생하는 normal 이며, 여기에 repeat 이 설정되어 있으면 처음부터 다시 재생되게 됩니다.
방향 속성이 alternate 로 설정되어 있다면 애니메이션이 기본 방향으로 재생된 직후 역방향으로 재생되게 됩니다.
이때 애니메이션의 반복적인 재생을 하나의 사이클로 표현하면, 홀수 번째 사이클에서는 정상방향으로 짝수 번째 사이클에서는 반대 방향으로 재생된다고 할 수 있습니다.
animation-fill-mode (방향)
애니메이션을 적용할 요소의 CSS 위치와 애니메이션 시작 위치가 다를 경우에, 그리고 또 애니메이션이 무한 반복이 아니라 한 번만 재생되는 경우라면 애니메이션이 끝났을 때 그 요소의 위치를 어디에 둘지를 결정할 수 있습니다.
forwards: 애니메이션 시작 전까지는 요소의 원래 위치에서 대기. 그리고 요소가 애니메이션 끝나는 위치에서 멈춘다.backwards: 페이지가 로딩되면 곧장 애니메이션 시작 위치로 이동, 끝나면 원래 위치로 돌아간다.both: 위 둘 효과를 모두 적용none: 애니메이션 시작 전까지 원래 위치에 고정, 끝나면 그 위치로 다시 돌아간다.
animation-play-state (재생 상황)
애니메이션의 진행상황을 설정할 수 있는 animation-play-state 속성은 축약형 문법에 포함될 수 없으며, 문법은 다음과 같이 사용합니다.
재생 상황의 키워드 중 하나인 runing 은 애니메이션이 진행 중임을, paused 는 진행 중이 아님을 나타냅니다.
이 속성은 재생(play)/일시정지(pause) 동작을 만들 때 활용할 수 있으며, 다음과 같이 작성할 수 있습니다.
위 코드는 요소에 마우스 오버를 하기 전까지 애니메이션이 계속 반복되다가 마우스가 오버되면 일시 정지하게 되고 요소에서 마우스 커서가 빠져나게 되면 다시 애니메이션이 시작될 것입니다.
W3C 는 장래에 animation-play-state 속성이 명세서에서 제외될 수도 있다고 밝혔지만, 현재까지는 CSS 일부로 받아들여지고 있습니다.
지금까지의 속성을 기반으로 간단한 예제 코드를 살펴보도록 합니다.
아래의 이미지에 마우스 오버를 하며 확인해 봅니다.
위 코드는 iteration-count 속성이 3이기 때문에 3번 효과를 반복해서 그리고 애니메이션 효과가 반대인 alternate 로 적용되어 있습니다.
애니메이션 구현의 축약형 설정(표현)
지금까지 살펴봤던 모든 애니메이션 속성을 연결해 하나의 CSS 규칙에 담으면 다음과 같은 코드를 구성할 수 있습니다.
위 코드는 애니메이션을 정의할 때마다 선언하기에는 너무 많은 코드입니다.
위와 같은 코드를 축약하기 위해 아래와 같이 사용할 수 있습니다.
애니메이션 속성들을 위와 같은 순서대로 나열하는 형태를 사용합니다.
화면이동(전환) 효과와 마찬가지로 animation-duration 과 animation-delay 속성 값은 반드시 순서에 맞춰 선언해야 합니다.
만약 둘 중 하나를 선언하지 않는다면 브라우저는 animation-delay 가 생략된 것으로 간주하고 기본 값인 0을 적용하게 됩니다.
다중 애니메이션 사용법
하나의 요소에 다양한 애니메이션 속성을 부여하기 위해서 쉼표로 각 속성을 구분하는 방법으로 사용할 수 있습니다.
이 방법은 하위 속성과 축약형 속성 표현식에서도 사용할 수 있으며 다음과 같이 작성할 수 있습니다.
conclusion
CSS 에 자바스크립트의 영역이라 할 수 있는 동작 레이어를 적용하려는 시도는 적지않은 논란을 일으켰지만, 각 브라우저사가 고안한 문법은 새롭고 우아하며, 개발자가 이를 기반으로 다양한 시도를 할 수 있게 충분한 유연성을 가지고 있습니다.
사실 현란하기만 한 웹 사이트만 양산될 것을 우려하는 웹의 순수성을 강조하는 입장에도 불구하고 이제는 CSS 의 공식, 비공식 속성이 된 전환, 애니메이션 기능을 많이 이용하는 추세이어서 장래에 곧 자리잡을 것으로 보입니다.
적절히 사용만 한다면 이러한 강력하면서도 새로운 기능은 웹을 더욱더 풍부하게 만들 수 있을 것입니다.
