HTML/CSS - animation

1. Animation 

CSS 애니메이션은 아이콘을 비롯한 다양한 태그에 애니메이션 효과를 줄 수 있는 기능입니다.

이를 통해 크기를 조절하는 scale에서 부터 회전 효과를 주는 rotate 까지 다양한 효과를 줄 수 있습니다.

 

2. Animation 사용법

먼저 애니메이션이 언제 어떻게 움직일지에 대해서 정의할 필요가 있습니다. 

예를 들어, '처음에는 아이콘이 가만히 있다가 점차 Y 방향으로 30px 이동한 뒤, 다시 원래 자리로 돌아온다.'

 

애니메이션의 움직임을 정의할 때 사용하는 것이 '@keyframe (name of animation) { }' 입니다.

@keyframe의 괄호 안에 애니메이션이 언제 어떻게 움직일지를 작성함으로서 

'(name of animation)은 언제 어떻게 움직이는 애니메이션 효과다.' 라는 것을 알려주게 됩니다.

 

2 - 1. from-to , Definition by percent

애니메이션을 정의하는 것에 두 가지 방법이 있습니다. 

from-to 방법과 퍼센트를 이용하여 단계별로 나누어 정의하는 방법이 있습니다. 

 

 

2 - 2. from-to

from-to 방법은 직관적으로 알 수 있듯이 애니메이션의 효과를 시작점(from)과 종점(to)으로 나누어서 표현하는 방법입니다. 따라서 시작점(from)과 종점(to)에 속성과 속성 값를 정의하면 속성 값들이 시작점(from)에서 종점(to)으로 점차 변화하게 됩니다. 

 

예시 - 1

 

예시 - 1 은 kokoa-navi-animation 이라는 애니메이션은 처음에는 opacity: 0 , y 방향으로 20px 인 지점에 있었지만, 

시간이 지나면 opacity: 1, 원점으로 돌아오는 애니메이션임으로 나타내고 있습니다.

 

 

from-to방법은 두 단계로 나누어서 속성과 속성 값을 정의하기 때문에 한 뱡향으로 진행하는 애니메이션을 만들어 낼 수 있지만, 양 방향으로 진행하는 애니메이션을 만들기 힘들다는 단점을 갖고 있습니다.

 

2 - 3. Definition by percent

Definition by percent 방법은 사용자가 원하는 만큼 단계별로 나누어서 속성과 속성 값을 정의합니다.  이를 통해 특정 객체가 왔다 갔다 하는 애니메이션을 자연스럽게 구현이 가능하다는 장점을 갖습니다.

 

Definition by percent 방법은 퍼센트(%)와 0% ~ 100% 사이의 숫자를 이용하여 여러 단계로 나누어 속성과 속성 값을 정의하며 그에 따라 애니메이션은 변화하게 됩니다.

 

예시 - 2

 

예시 - 2 은 move 이라는 애니메이션은 처음에는 top: 0px인 지점에 있었지만, 25% 진행상태에서는 top: 25px,

75% 진행상태에서는 top: 175px, 100% 진행상태에서는 top: 200px 에 따라 이동하는 애니메이션입니다.

 

 

2 - 4. animation property 사용

@keyframe과 from-to, definition by percent를 통해 애니메이션의 이름과 효과를 정의하였다면 

마지막으로 animation property를 이용하여 원하는 block에 효과를 부여하게 됩니다.

 

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

 

name : 애니메이션의 이름 (@keyframe에서 정의한 이름)

duration : 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정

timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정

delay : 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정

teration-count : 애니메이션이 몇 번 반복될지 지정

direction : 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정

fill-mode : 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정

play-state : 애니메이션을 멈추거나 다시 시작할 수 있습니다.

 

 

예시 - 3

예시 - 3는 kokoa-navi-animation을 해당 block에서 2초 동안 ease-in-out 속도로 진행하며, 

              애니메이션이 끝나고 나면 초기 값으로 돌아가지 말고,  마지막 속성 값을 유지하라는 의미합니다.

 

 

3. animation 의 팁

3 - 1) 애니메이션이 끝나고 나면 초기 값으로 돌아가지 말고,  마지막 속성 값을 유지하고 싶다면

 

        ->  ease-in-function 뒤에 'forwards' 을 작성

 

3 - 2) 문서의 레이아웃을 변경하지 않고 요소를 숨기고 싶은 경우 

        (요소를 숨길 경우, 뒤에 있는 레이아웃을 클릭 가능)

 

       -> visibility: hidden;

 

3 - 3) 애니메이션 효과를 부드럽게 만들고 싶은 경우

 

       -> will-change: transform;

       -> 브라우저에게 변하게 될 속성과 속성 값을 미리 알려줌으로서 부드러운 이벤트 구사 가능

       -> animation 전에 작성