Module 9 - CSS Animation for Beginners

1. Introduction

인간의 뇌는 움직이는 물체에 대해 집중을 하게 되는 것으로 집중을 하는 경향이 있다. 이러한 움직임을 감지하는 자연적인 경향 때문에 앱이나 웹사이트에 Animation을 추가하는 것은 제품의 중요한 부분들을 유저들에게 있어 눈길을 끄는 것과 더불어 웹사이트 인터페이스의 흥미를 추구하게 만드는 아주 강력한 무기가 될 수 있다.

 

만약 Animation이 원할하게 잘 적용되었다면 Animation은 값진 인터렉션과 피드백을 추가할 수 있다. 더불어 Animation은 감정적인 경험, 기뿜 그리고 인터페이스의 성격을 부여하고 향상시켜 웹사이트의 생명을 불어넣을 수 있다. 

 

"Emotional design's primary goal is to facilitate human-to-human communications. If we're doing our job well, the computer recedes into the background, and personalities rise to the surface." (감성 디자인의 핵심적인 목적은 인간 대 인간 커뮤니케이션을 수월하게 하는 것에 있다. 만약 우리가 작업을 잘 하고 있다면 컴퓨터는 배경안으로 사라지며 표면에는 성격이 자라나기 시작한다.) - Aaron Walter, Designing for Emotion

 

이번에는 CSS Animation의 대해 훑어보며 다음의 링크를 통해 이 게시물 안에 있는 Animation property들의 예시들의 CSS 코드들을 살펴볼 수 있다.

https://codepen.io/collection/nbEZgX/

CSS Animations - a Collection by Rachel Cope on CodePen

 

2. The Building Blocks of Animations

CSS Animation은 두 가지의 기본적인 Building Blocks들로 구성된다.

1. Keyframes (키프레임) - Animation의 Stage와 Style을 정의해준다.
2. Animation Properties (애니메이션 속성) - @keyframes을 특정 CSS 요소에 할당하고 어떻게 Animation이 작동될것인지 정의를 해준다.

두 가지들을 각기 하나 하나 살펴보겠다.

 

Building Block #1: Keyframes

Keyframes들은 CSS Animation의 핵심적인 요소이다. 이들은 Animation 타임라인의 각기 Stage에서 Animation이 어떻게 보일지 정의를 전반적으로 내린다. 각각의 @keyframes들은 다음과 같이 이루어져 있다.

• Name of the Animation (애니메이션 이름) - Animation을 서술하는 이름. 예를 들어 bounceIn 과 같은 예시가 있다.
• Stages of the Animation (애니메이션 스테이지) - 각각의 Animation Stage들은 퍼센티지로 표현된다. 0%은 Animation의 맨 처음을 나타내고 반면 100%은 Animation의 재일 마지막을 나타낸다. 여러 가지의 그 사이에 있는 퍼센티지들은 0%과 100% 사이에 추가되어질 수 있다.
• CSS Properties (CSS 속성) - CSS Properties로써 Animation 타임라인의 각각의 Stage들을 정의한다.

다음과 같이 "bounceIn"과 같은 간단한 이름을 가진 @keyframe을 만들어 보았다고 가정하였을때, @keyframe이 세 Stage로 이루어져 있다고 생각하자. 0% 즉 맨 첫번째 Stage에 있는 요소는 Opacity가 0%이고 기본 사이즈에서 CSS Transform Scale을 이용해 10%줄였다고 하자. 60% 즉 두 번째 Stage에 있는 요소는 Opacity가 100%이고 120%의 사이즈를 가지고 있다고 생각한다음 100% 즉 마지막 Stage에 있는 요소는 점차적으로 원래 크기로 돌아갈때 까지 크기가 줄어든다고 구상을 해보았다.

 

위에서 언급한 Animation을 CSS로 구현하기 위해서는 다음과 같은 코드를 작성해 줄 수 있다.

 

@keyframes bounceIn { /* keyframe bounceIn이라는 keyframe 이름 */
    0% { /* 프레임 제일 첫번째에서는 */
        transform: scale (0.1); /* 요소의 사이즈가 0.1 */
        opacity: 0; /* 요소의 투명도가 0 */
    }

    60% { /* 프레임 제일 두번째에서는 */
        transform: scale (1.2); /* 요소의 사이즈가 1.2 */
        opacity: 1; /* 요소의 투명도가 1 */
    }

    100% { /* 프레임 제일 세번째에서는 */
        transform: scale(1); /* 요소의 사이즈가 1 */
    }
}

 

Building Block #2: Animation Properties

@keyframes의 이름과 Stage들이 설정되고 나면 그 다음으로 들어가야 할 것은 Animation Properties들로 Animation을 작동시키기 위해 꼭 필요한 것들 중 하나이다. Animation Property는 두 가지의 역할을 하는데 이는 다음과 같다.

1. 디자이너가 Animation을 적용하고 싶은 요소에 @keyframes들을 할당한다.
2. 그 요소들이 어떠한 Animation으로 나타날지 설정한다.

Animation Property는 디자이너가 Animation을 적용하고 싶은 요소 즉 CSS Selector으로 집어넣어 생성할 수 있다. 이때 Animation이 효과를 드러내기 위해서는 두 개의 Animation property를 필수로 요구한다.

• animation-name - Animation의 이름, 적용하고 싶은 @keyframes 이름을 적음으로써 어떤 Animation이 나타날지 설정할 수 있다.
• animation-duration - Animation의 지속시간, seconds (e.g. 5s) 아니면 miliseconds (e.g. 200ms)으로 지정된다.

윗 bounceIn 예시를 들고 와 animation-name과 animation-duration을 Animation을 적용하고 싶은 div 태그로 소속된 요소에 추가하면 다음과 같이 코드를 쓸 수 있다.

 

div { /* div 안에 있는 요소를 찾아 */
    animation-duration: 2s; /* Animation 지속시간을 2초로 제한하고 */
    animation-name: bounceIn; /* bounceIn이라고 Animation을 @keyframes안에 할당된 프레임마다 재생하여라 */
}

 

@keyframes과 Animation Properties를 CSS에 다 입력하고 나면 간단한 Animation을 구현할 수 있게 된다.

 

3. Animation Property Shorthand

각각의 Animation Property들은 개별적으로 정의내려지지만 더욱 빠르고 깔끔한 코드를 작성하기 위해선 Animation Shorthand를 사용하는 것이 권장된다. 모든 Animation Property들은 animation: 이라는 property를 통해 작성가능하며 작성하는 값들의 순서는 다음과 같다.

 

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

/* Shorthand를 적용하여 방금 위의 코드를 쓰면 다음과 같다 */
div {
    animation: bounceIn 2s; /* animation-name, animation-duration */
}

 

4. Note About Prefixes

Prefixes란 무엇일까?

Prefixes는 Vendor Prefixes라고 불리며 이는 CSS 표준이 아니거나 확정되기 전 특정한 브라우저에만 지원되는 CSS Property들을 사용하기 위해 제공되는 기능이다. 이때 -webkit-와 같은 접두어를 CSS property앞에 붙어 웹 브라우저 제조사 별로 제공할 수 있는 CSS Prefixes를 골라 쓸 수 있다. 

 

2014년 후반들어, 많은 WebKit 기반 브라우저들은 -webkit-prefixed 버젼의 Animation, keyframes 그리고 transition을 사용한다. 이때 WebKit란 Apple에서 개발한 웹 브라우저 및 운영체제에도 쓰이는 브라우저 엔진의 일종으로써 스탠다드 버젼을 사용하기 전 개발자들은 unprefixed와 WebKit 버젼에 알맞는 코드를 모두 알아야 한다.

 

https://webkit.org/

WebKit

 

WebKit prefixes를 이용한 Keyframes과 Animation들의 코드는 다음과 같이 작성해 줄 수 있다.

 

/* Animation Property */
div {
    -webkit-animation-duration: 2s; /* WebKit Prefixes가 적용된 Animation Property */
    animation-duration: 2s;
    -webkit-animation-name: bounceIn; /* WebKit Prefixes가 적용된 Animation Property */
    animation-name: bounceIn;
}

/* @keyframes */
@-webkit-keyframes bounceIn { /* WebKit Prefixes가 적용된 @keyframes */
    /* styles */
}
@keyframes bounceIn {
    /* styles */
}

 

이 때 더욱 쉽게 코드를 작성하기 위해 Bourbon이나 Sass mixin library와 같은 모든 현대 브라우저에 적합한 vendor-prefixes를 모두 포함하는 라이브러리를 사용하는것을 추천한다. 다음은 Bourbon Library를 이용하여 더욱 Vendor prefixes가 적용된 Animation과 @keyframes을 담당하는 코드가 얼마나 간단하게 바꼈는지 보여준다.

 

div {
    @include animation (bounceIn 2s);
}

@include keyframes (bounceIn) {
    /* styles */
}

 

5. Additional Animation Properties

Animation Property에 들어가는 것들 중 지금까지 배워본 것은 animation-name과 animation-duration 들이다. 그렇다면 이 두 가지의 property를 넘어 과연 쓸수 있는 것이 있을까? 이는 앞서 언급한 Animation Property의 순서에서 나와 있듯이 아주 많은 것을 확인 할 수 있다. 이들을 이용해 더욱 복잡한 Animation을 커스텀화하고 창작할 수 있다. 

• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

animation-timing-function

animation-timing-function은 전반적인 speed curve와 animation 페이스를 담당한다. 마치 After Effects에서 speed curve를 조절하여 더욱 자연스러운 모션을 만들었던 것 처럼 ease, linear, ease-in, ease-out, ease-in-out, initial, 그리고 inherit과 같은 값들을 통해 요소들의 Animation 타이밍을 조절 할 수 있다. 이 중에서 기본값 즉 아무 값들이 할당되지 않는 경우는 ease로써 느리게 Animation을 시작하다가 빨라진 다음 다시 느려지게 하는 모션을 구현해준다. 각각의 자세한 타이밍 값들은 아래 링크에서 확인할 수 있다.

 

https://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp

CSS animation-timing-function Property

 

이 때 코드는 다음과 같이 작성할 수 있다.

 

div {
    animation-timing-function: ease-in-out;
}

/* Animation shorthand syntax */
div {
    animation: bounceIn 2s ease-in-out;
}

 

animation-delay

animation-delay는 Animation이 언제 쯤 시작하는지 설정해 줄 수 있다. 만약 값으로써 2s와 같이 들어갔다면 그 요소에 명령이 들어간후 2초 후에 Animation을 재생할 것이다. 반대로 음수값인 -2s가 들어갔다면 명령이 들어가자마자 곧바로 Animation을 재생하지만 Animation 시퀀스 기준 2초 후 부터의 모션을 재상할 것이다.

 

여기서의 값은 second 혹은 milisecond의 단위로 써넣어주어야 한다.

 

div {
    animation-delay: 5s; /* animation을 5초 후에 재생 */
}

/* Animation shorthand syntax */
div {
    animation: bounceIn 2s ease-in-out;
}

 

animation-iteration-count

animation-iteration-count는 animation이 몇번 반복하여 플레이 될지 설정해주는 property이다. 이때 들어가는 값들은 다음과 같다. 

• # (숫자) - 반복되는 수 (기본값은 1로 설정된다.)
• infinite - 영원히 반복되게끔 설정한다.
• initial - 반복되는 값을 기본값으로 설정해준다.
• inherit - 부모 요소에 있는 반복되는 값들을 물려받는다.

코드는 다음과 같이 작성된다.

 

div {
    animation-iteration-count: 2; /* Animation을 두 번 반복 */
}

/* animation shorthand syntax */
div {
    animation: bounceIn 2s ease-in-out 3s 2;
}

 

animation-direction

animation-direction property는 animation이 시퀀스에 따라 정방향으로 움직일지 역재생을 할지 아니면 둘 다 적용될지 설정하게 해준다. 이때 들어가는 값들은 다음과 같다.

• normal (default) - Animation을 정재생하며 모든 Animation의 cycle (하나의 시퀀스)은 0% keyframe부터 100% keyframe까지 순차적으로 진행된다.
• reverse - Animation을 역재생하게 해주며 모든 Animation의 cycle (하나의 시퀀스)은 100% keyframe부터 0% keyframe까지 역방향으로 진행된다.
• alternate - Animation이 각각의 cycle마다 진행되는 방향이 다르게 된다. 즉 첫번째, 세번째, 다섯번째 등을 포함하는 홀수번째의 cycle들은 0%에서 100%까지 즉 정재생을 하며 두번째, 네번째, 여섯번째 등을 포함하는 짝수번째의 cycle들은 100%에서 0%까지 역재생한다.
• alternate-reverse - Animation이 각각의 cycle마다 진행되는 방향이 다르게 된다. 즉 두번째, 네번째, 여섯번째 등을 포함하는 짝수번째의 cycle들은 0%에서 100%까지 즉 정재생을 하며 첫번째, 세번째, 다섯번째 등을 포함하는 홀수번째의 cycle들은 100%에서 0%까지 역재생한다.

코드는 다음과 같이 작성할 수 있다.

 

div {
    animation-direction: alternate; /* 홀수 cycle에는 정재생, 짝수 cycle에는 역재생 */
}

/* animation shorthand syntax */
    animation: bounceIn 2s ease-in-out 3s 3 alternate;
}

 

animation-fill-mode

animation-fill-mode는 Animation 스타일이 Animation이 재생 전 또는 재생 후 계속 Animation style이 보일지 결정해 주는 property이다. 기본적으로 Animation은 Animation이 재생되기 전 (만약 animation-delay로 인해 어느 시간동안 animation이 적용되지 않는 경우) 혹은 재생되고 난 후 Animation style을 미리 보여주지 않는다. animation-fill-mode는 이러한 animation의 특성들을 다음과 같은 값을 통해 제어해 줄 수 있다.

• backwards - Animation이 시작되기 전 (animation-delay를 통해 animation이 보이지 않는 동안) 0%에 있던 animation의 style이 요소에 적용된다.
• forwards - Animation이 끝나고 난 후 100%에 있던 animation style이 끝까지 유지된다. (Animation style이 초기화되지 않는다.)
• both - backwards와 forwards를 둘 다 적용하여 Animation이 시작되기 전 0%의 animation style을 미리 보여주는 동시에 끝나고 난후에도 마지막 animation style을 계속 유지하여 보여준다.
• normal (default) - animation style이 animation 시작 전 그리고 후에 어떠한 style을 보여주지 않는다. 

코드는 다음과 같이 써 넣어줄 수 있다.

 

div {
    animation-fill-mode: forwards; /* animation이 끝난후에도 style을 계속 유지하여라 */
}

/* animation shorthand syntax */
div {
    animation: bounceIn 2s ease-in-out 3s 3 forwards;
}

 

animation-play-state

animation-play-state는 특정한 유저들의 행동이 감지되었을 때 animation이 재생을 할지 아니면 일시중지를 할지 명시해주는 property이다. Animation을 다시 재생한다면 animation은 일시중지된 프레임에서 다시 재생을 하게 된다. 들어가는 값들은 다음과 같다.

• playing - Animation을 재생시켜준다.
• paused - Animation을 일시중지해준다.

코드는 다음과 같이 써넣어줄 수 있다.

 

.div:hover { /* div에 소속된 요소에 마우스를 올려둔다면 */
    animation-play-state: paused; /* animation을 일시중지하여라 */
}

 

6. Multiple Animations

여러 개의 Animation을 selector에 적용하려면 Comma (,)를 사용하여 각각의 Animation 이름을 구분시켜주면 된다. 예를 들면 다음과 같다.

 

.div {
    /* div안에 있는 요소를 2초동안 slideIn과 1.75초동안 rotate하는 Animation을 구현하여라 */
    animation: slideIn 2s, rotate 1.75;
}

 

지금까지 배웠던 내용들을 통해 기본적인 Animation들을 CSS를 통해 구현하는 방법에 대해 알아보았다. 구현할 수 있는 Animation은 무한정이며 이를 가장 빠르게 습득할 수 있는 방법은 곧바로 Animation을 코드로 구현하는 것으로써 도움이 되는 웹사이트 하나를 소개하겠다.

 

6. Go Forth and Animate

 

Animate.css - 각각의 CSS로 구현할 수 있는 Animation style들을 직관적으로 보여주는 사이트로써 초보자나 프로젝트를 시작하려는 유저들에게 아주 유용하게 사용할 수 있다. 아래 사이트를 통해 bounceIn과 같은 Animation style뿐만이 아닌 각각 얼마나 많은 Animation style들이 있는지 살펴볼 수 있다.

https://animate.style/

Animate.css | A cross-browser library of CSS animations.

 

References

Cope, R. (2014, December 4). CSS Animation for Beginners. Thoughtbot. https://thoughtbot.com/blog/css-animation-for-beginners