[CSS] Animation 완벽 정리

 

요소가 연속적으로 회전한다던가, 왼쪽 오른쪽으로 움직이는 요소를 만들고 싶다면 어떻게 해야할까?

바로 CSS property인 Animation을 사용하면 된다. 

animation property는 특정 요소에 스타일(CSS)을 변환하는 애니메이션을 적용한다.

Animation CSS property

# animation-name 

요소에 적용할 @keyframes 이름을 정의한다.

# animation-duration

애니메이션이 한 사이클을 완료하는데 걸리는 시간을 정의한다.

# animation-timing-function

transition 효과의 시간당 속도를 설정하여, 진행되는 방식을 정의한다.

 

ease

기본값으로, 중간으로 갈수록 속도가 증가하고 끝에서 다시 느려진다.

 

linear

동일한 속도로 진행된다.

 

ease-in

천천히 시작되며 끝날때까지 속도가 점차 증가된다.

 

ease-out

빠르게 시작되며 끝날때까지 속도가 점차 감소된다.

 

ease-in-out

천천히 시작되고 빨라진 다음 다시 느려진다. 

 

cubic-bezier(n,n,n,n)

한국말로 직역하면 3차원 베지어 곡선이라는 말이다.

솔직히 무슨소린지 모르겠지만, 대충 이해하자면 4개의 점으로 정의된 곡선을 이용하여 속도를 조절하는 거라고 이해하면 될 듯 하다.

 

위에 속성 값들도 3차원 베지어 곡선으로 이루어져있으며, 3차원 베지어 곡선으로 나타내면 아래 그림과 같다.

https://cubic-bezier.com/

곡선을 아래와 같이 만든다면 반동으로 움직이는 듯한 애니메이션을 구현할 수 있다.

 

아래 사이트에 방문하면 여러가지 3차원 베지어 곡선을 만들어서 테스트 할 수 있다. 

cubic-bezier.com

# animation-delay

애니메이션이 시작할 시점을 정의한다.

animation-delay: 2s; // 2초 뒤에 애니메이션이 시작된다.
animation-delay: -2s; // 즉시 시작되지만 애니메이션 시작 시점이 2초가 지난 시점부터 시작된다.

# animation-iteration-count

애니메이션 재생 횟수를 정의한다.

 

infinite

애니메이션이 영원히 반복된다.

 

<number>

재생 횟수를 정의한다. 기본값은 1이다.

# animation-direction

애니메이션이 앞뒤로 번갈아 재생되어야하는지 여부를 정의한다.

 

normal

기본값으로, 정방향으로 재생된다.

 

reverse

역방향으로 재생된다.

 

alternate

반복 주기마다 방향을 뒤집으며 재생된다. 첫번째 반복은 정방향으로, 그 다음은 역방향으로 재생된다.

 

 

alternate-reverse

반복 주기마다 방향을 뒤집으며 재생된다. 첫번째 반복은 역방향으로, 그 다음은 정방향으로 재생된다.

 

# animatoin-fill-mode

애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 정의한다.

 

none

기본값으로, 애니메이션이 끝나면 처음 스타일로 돌아간다.

 

forwards

애니메이션이 끝난 후 스타일을 유지한다.

 

backwards

 

both

# animation-play-state

애니메이션이 실행 중이거나 일시 정지되어 있는지 여부를 확인한다.

일시 중지 된 애니메이션을 다시 시작하면 중단 된 위치부터 애니메이션이 시작된다.

 

running

애니메이션 재생

 

paused

애니메이션 일시 정지

# animation

축약 속성인 animation을 사용하여 모든 애니메이션 속성을 한번에 설정할 수 있다.

순서는 상관없다.

animation: 3s ease-in 1s reverse forwards slidein;

 

---