CSS3 Animation(key frame)

CSS3 애니메이션 효과 지정하기

transition, transform 처럼 변형, 전환(화면이동) 효과도 멋진 기술이지만 CSS3에서 가장 눈에 띄는 변화 중의 하나는 바로 애니메이션 효과를 지정할 수 있다는 것입니다.

기존에는 변형, 전환인 2D, 3D의 효과를 주는 동안 시간을 주면 점차 모양이 바뀌는 것을 구현할 수는 있지만 이러한 효과를 주는 데 있어서 가장 제한이 되는 사항은 다음과 같은 것이 있습니다.

• 전환 효과의 시작과 끝만을 지정할 수 있다.

즉, CSS3 효과는 CSS의 특정 클래스나 구문을 지정하고 제거하는 방식으로 구현되기 때문에, 중간 모습(과정)에 대한 설명이 없습니다.

단순히 시작과 끝만을 지정할 수 있다는 의미입니다.

• 순차적인 효과를 적용하기 힘들다.

중간 단계를 지정할 수 없기 때문에 완급을 조정하거나 특정 시간에 따라 효과를 지정할 수 없습니다.

위와 같은 문제를 해결하기 위해서는 CSS3에서는 키 프레임(Key Frame)이라는 개념을 도입하였는데, 이것은 플래시 같은 도구에서 사용되는 것과 같은 개념입니다.

플래시에서는 도구를 통해 시간에 따라서 키 프레임 직접 지정하는 방식을 사용하지만 CSS3에서는 from, to 나 진행 상황에 따라 %를 지정하여 사용합니다.

정리하자면, 변형, 전환효과에서 가능한 구현 수준을 넘어, 좀 더 유연하고 세심한 조절이 가능한 애니메이션을 만들 수 있도록 해주는 것입니다.

CSS3 Animation

위에서 언급했듯이 애니메이션을 만들기 위해서는 가장 먼저 키 프레임을 설정해야 합니다.

키 프레임(Key Frame)은 전환(화면 이동) 효과가 발생하는 시작점과 종료점입니다.

가장 간단한 형태의 애니메이션은 시작 프레임과 종료 프레임이라는 2개의 키 프레임으로 만들어지지만, 좀 더 복잡한 애니메이션을 만들 경우에는 그 사이에 몇 개의 키 프레임을 더 추가하여 사용할 수 있습니다.

CSS 전환(화면 이동) 효과인 transition 은 사실상 2개의 키 프레임만을 사용한다고 할 수 있고 이 점이 애니메이션과 구분되는 점입니다.

CSS 에서 키 프레임은 @keyframes 규칙 속에 정의하며, 다음과 같은 문법을 사용합니다.

css

@keyframes 'name' {
    keyframe {
        property : value;
    }
}

@keyframes 규칙의 첫 번째 값은 키 프레임의 이름(name)이며, 식별자 역할을 하는 이름을 통해 키 프레임이 호출되어 정의된 애니메이션이 동작하게 됩니다.

이름으로 어떤 내용을 정의해도 무방하지만, 가급적이면 애니메이션의 흐름상 연관성이 있는 이름을 붙이는 것이 좋으며, 연관성 있는 이름을 정의해 두면 나중에 여러 장의 키 프레임이 사용되더라도 특정 장면을 찾아내기 쉬울 것입니다.

다음 값인 keyframe 에서는 전체 애니메이션 시간 중에서 해당 키 프레임이 나타날 위치를 지정합니다.

여기에는 퍼센트(%)값이나 from 또는 to 중 하나의 키워드를 사용할 수 있습니다.(이때 사용되는 값은 0에서 100퍼센트 사이의 값이다)

이 부분에는 최소 2개의 키 프레임이 존재해야 하며, 애니메이션 상에서 고유의 위치만 지니고 있다면 키 프레임의 개수 제한은 없습니다.

각 키 프레임은 애니메이션의 특정 장면에서 선택된 요소에 적용된 하나의 CSS 선언 또는 일련의 선언을 담고 있습니다.

예제 코드를 통해 간단히 살펴보도록 합니다.

다음의 코드는 3개의 키 프레임을 사용한 것입니다.

css

@-webkit-keyframes 'expand' {
    from {
        border-width : 20px;
    }
    50% {
        border-width : 5px;
    }
    to {
        border-width: 5px;
        height: 100px;
        width: 200px;
    }
}

위 코드를 간단히 설명하자면 애니메이션의 시작 부분에서 선택된 요소는 테두리 너비가 20px 인 외곽선을 지니고, 애니메이션 중반부에서 외곽선은 5px 줄어듭니다.

그리고 애니메이션의 마지막 부분에서 외관선은 1px 높이와 너비는 각각 100px, 200px 이 됩니다.

각 키 프레임 사이에서 요소의 모습은 점차 변화하게 되며, 애니메이션의 시작과 50퍼센트 부분에서 외곽선은 20px 에서 5px 로 부드럽게 바뀌게 될 것입니다.

자세히 살펴보면 마지막 프레임에서 테두리 값을 바꾸지 않았는데 이렇게 애니메이션 다음 키 프레임에 기존의 값을 바꾸지 않으면 애니메이션에 원래 적용되기로 했던 요소의 값이 그대로 상속되며, 애니메이션의 느낌은 크게 달라질 것입니다.

아직까지는 애니메이션이 실행되지 않을 것입니다.

애니메이션 속성

키 프레임을 설정하고 나면 애니메이션에 사용될 요소의 움직임을 제어할 차례입니다.

상당수의 애니메이션 속성은 화면이동(전환) 효과에서 사용한 속성과 동일한 문법을 사용하고 있습니다.

애니메이션 효과를 설정하는 순서

• 애니메이션 효과를 별도의 @-webkit-keyframes 라는 것으로 선언한다.
• 선언된 키 프레임에 이름과 애니메이션 상태에 따른 효과를 키 프레임마다 지정한다.
• 특정한 CSS나 자바스크립트를 이용해서 애니메이션을 사용할 수 있도록 추가한다.

지금까지 설명한 내용을 토대로 다음과 같은 간단한 애니메이션을 만들 수 있습니다.

See the Pen animatin #1 by jaeheekim (@jaehee) on CodePen.

현재 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 속성은 반복의 횟수를 설정하며, 다음과 같은 문법을 사용합니다.

css

.selector {
    animation-iteration-count: count;
}

위 문법에서 횟수(count)에는 수 또는 infinite라는 키워드를 사용합니다.

숫자를 사용하면 해당 횟수만큼 애니메이션이 반복되고, 기본 설정 값은 1이며 애니메이션은 처음부터 끝까지 재생된 뒤 멈추게 됩니다.

infinite 값이 적용되면 애니메이션은 무한 반복되며, 다른 조건에 따라 이 값이 변경되지 않는 한 계속 반복됩니다.

이 값에 0이나 음수를 사용하면 애니메이션은 재생되지 않습니다.

animation-direction (방향)

애니메이션은 일반적으로 시작 키 프레임에서부터 마지막 키 프레임 순으로 순차적으로 재생(전환효과와 같이)되지만 역순으로 재생시킬 수도 있습니다.

다시 말해, 애니메이션을 한 방향으로 재생하거나, 순차적인 방향과 반대 방향으로 즉, 양방향으로 재생할 수 있는 것입니다.

이를 위해 animation-direction 속성을 사용합니다.

css

.selector {
    animation-direction: keyword;
}

방향 속성에서 키워드 값으로는 normal 또는 alternate 를 사용합니다.

기본 설정 값은 처음 장면에서 마지막 장면의 방향으로 재생하는 normal 이며, 여기에 repeat 이 설정되어 있으면 처음부터 다시 재생되게 됩니다.

방향 속성이 alternate 로 설정되어 있다면 애니메이션이 기본 방향으로 재생된 직후 역방향으로 재생되게 됩니다.

이때 애니메이션의 반복적인 재생을 하나의 사이클로 표현하면, 홀수 번째 사이클에서는 정상방향으로 짝수 번째 사이클에서는 반대 방향으로 재생된다고 할 수 있습니다.

animation-fill-mode (방향)

애니메이션을 적용할 요소의 CSS 위치와 애니메이션 시작 위치가 다를 경우에, 그리고 또 애니메이션이 무한 반복이 아니라 한 번만 재생되는 경우라면 애니메이션이 끝났을 때 그 요소의 위치를 어디에 둘지를 결정할 수 있습니다.

• forwards : 애니메이션 시작 전까지는 요소의 원래 위치에서 대기. 그리고 요소가 애니메이션 끝나는 위치에서 멈춘다.
• backwards : 페이지가 로딩되면 곧장 애니메이션 시작 위치로 이동, 끝나면 원래 위치로 돌아간다.
• both : 위 둘 효과를 모두 적용
• none : 애니메이션 시작 전까지 원래 위치에 고정, 끝나면 그 위치로 다시 돌아간다.







animation-play-state (재생 상황)

애니메이션의 진행상황을 설정할 수 있는 animation-play-state 속성은 축약형 문법에 포함될 수 없으며, 문법은 다음과 같이 사용합니다.

css

.selector {
    animation-play-state: keyword;
}

재생 상황의 키워드 중 하나인 runing 은 애니메이션이 진행 중임을, paused 는 진행 중이 아님을 나타냅니다.

이 속성은 재생(play)/일시정지(pause) 동작을 만들 때 활용할 수 있으며, 다음과 같이 작성할 수 있습니다.

css

.selector {
    animation: dynamic 5s infinite alternate;
}
.selector:hover {
    animation-play-state: paused;
}

위 코드는 요소에 마우스 오버를 하기 전까지 애니메이션이 계속  반복되다가 마우스가 오버되면 일시 정지하게 되고 요소에서 마우스 커서가 빠져나게 되면 다시 애니메이션이 시작될 것입니다.




W3C 는 장래에 animation-play-state 속성이 명세서에서 제외될 수도 있다고 밝혔지만, 현재까지는 CSS 일부로 받아들여지고 있습니다.







지금까지의 속성을 기반으로 간단한 예제 코드를 살펴보도록 합니다.

아래의 이미지에 마우스 오버를 하며 확인해 봅니다.

See the Pen animation #2 by jaeheekim (@jaehee) on CodePen.




See the Pen animation #3 by jaeheekim (@jaehee) on CodePen.

위 코드는 iteration-count 속성이 3이기 때문에 3번 효과를 반복해서 그리고 애니메이션 효과가 반대인 alternate 로 적용되어 있습니다.







애니메이션 구현의 축약형 설정(표현)

지금까지 살펴봤던 모든 애니메이션 속성을 연결해 하나의 CSS 규칙에 담으면 다음과 같은 코드를 구성할 수 있습니다.

css

.demo {
    animation-name: dynamic;
    animation-duration: 4s;
    animation-timing-function: ease-in;
    animation-delay: 2s;
    animation-iteration-count: 5;
    animation-direction: alternate;
}

위 코드는 애니메이션을 정의할 때마다 선언하기에는 너무 많은 코드입니다.




위와 같은 코드를 축약하기 위해 아래와 같이 사용할 수 있습니다.

css

#selector {
    animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction
}

.demo {
    animation: dynamic 4s ease-in 2s 5 alternate;
}




애니메이션 속성들을 위와 같은 순서대로 나열하는 형태를 사용합니다.

화면이동(전환) 효과와 마찬가지로 animation-duration 과 animation-delay 속성 값은 반드시 순서에 맞춰 선언해야 합니다.

만약 둘 중 하나를 선언하지 않는다면 브라우저는 animation-delay 가 생략된 것으로 간주하고 기본 값인 0을 적용하게 됩니다.







다중 애니메이션 사용법

하나의 요소에 다양한 애니메이션 속성을 부여하기 위해서 쉼표로 각 속성을 구분하는 방법으로 사용할 수 있습니다.

이 방법은 하위 속성과 축약형 속성 표현식에서도 사용할 수 있으며 다음과 같이 작성할 수 있습니다.

css

.demo {
    animation-name: first-ani, second-ani;
    animation-duration: 5s, 1500ms;
    animation-delay: 500ms, 1000ms;
}

/* 위와 같다 */
.demo {
    animation: first-ani 5s 500ms, second-ani 1500ms 1000ms;
}










conclusion

CSS 에 자바스크립트의 영역이라 할 수 있는 동작 레이어를 적용하려는 시도는 적지않은 논란을 일으켰지만, 각 브라우저사가 고안한 문법은 새롭고 우아하며, 개발자가 이를 기반으로 다양한 시도를 할 수 있게 충분한 유연성을 가지고 있습니다.

사실 현란하기만 한 웹 사이트만 양산될 것을 우려하는 웹의 순수성을 강조하는 입장에도 불구하고 이제는 CSS 의 공식, 비공식 속성이 된 전환, 애니메이션 기능을 많이 이용하는 추세이어서 장래에 곧 자리잡을 것으로 보입니다.

적절히 사용만 한다면 이러한 강력하면서도 새로운 기능은 웹을 더욱더 풍부하게 만들 수 있을 것입니다.







related links

1. transition(전이,화면 이동) #1
2. transition(전이,화면 이동) #2







Jaehee's WebClub