CSS3 : 애니메이션 2 (animation, @keyframes)

CSS & SCSS

animation, @keyframes

transform은 transition없이 애니메이션 기능을 수행할 수 없으나

animation은 @keyframes 과 함께 사용하여 transition없이 즉시변경이 아닌 서서히변경하는 애니메이션을 만들 수 있습니다. (transform도 @keyframes과 함께 사용하여 애니메이션 적용 가능)

transition은 적용된 속성 기준 이벤트 및 상태선택자와 함께 애니메이션을 동작하는 거라면

@keyframes을 선언하면 시작-중간-끝 동작을 생성하여 다양한 시간차 애니메이션 동작이 가능합니다.

(아래) 왼쪽 기준 0px -> 500px 위치로 이동하고 싶은 애니메이션이 있다고 가정해봅시다.

애니메이션 시작 위치는 0px 이며 도착(끝) 위치는 500px입니다.

<div class="box">box</div>

이렇게 시작-끝의 원하는 애니메이션 동작을 결정했다면 @keyframes을 생성합니다.

이 때 애니메이션이름은 필수로 생성하며 의미있게 지어줍니다.

분기별로 0% ~ 100% keyframes 위치를 생성하여 원하는 속성을 입력하면 됩니다.

@keyframes box_position {
    0% {transform:translateX(0)}
    100% {transform:translateX(500px)}
}

@keyframes을 준비했다면 이제 해당 애니메이션이 적용되는 대상에

애니메이션(animation) 속성을 이용하여 적용해줍니다.

이 때 지연시간은 transition과 동일하게 초 단위로 1초 == 1s 로 입력합니다.

* @keyframes과 적용선택자의 순서는 중요하지 않습니다.

@keyframes box_position {
    0% {transform:translateX(0)}
    100% {transform:translateX(500px)}
}

.box {
    width:200px; height:200px; background:lime;
    animation:box_position 1s;
}

See the Pen CSS-animation-example2 by yuna122212 (@yuna122212) on CodePen.

@keyframes을 자유롭게 사용하실 수 있다면 이제 키프레임을 부르는 애니메이션 속성을 다룰 차례입니다.

애니메이션 속성은 transition과 같이 다양한 속성을 가지는데 필수/선택속성이 나뉘므로

많은 연습을 통해 익숙해지는 것이 중요합니다.

애니메이션(animation) 속성

transition과 동일하게 개발자도구에서 애니메이션 속성 삼각형을 누르고

입력하지 않은 속성까지 추가로 확인할 수 있습니다.

See the Pen Untitled by yuna122212 (@yuna122212) on CodePen.

애니메이션 지속시간 duration

애니메이션을 한번 재생하는데 걸리는 시간을 의미합니다.

0.5초 == 0.5s

animation:애니메이션이름 1s;
animation-duration:2s;

애니메이션 가속도 timing-function

* 애니메이션의 가속도를 설정합니다.

linear 일정속도 전환
ease (slow->fast->slow) 천천히 시작되고 중간에 빨라지고 다시 느려지며 끝납니다.
ease-in 천천히 시작합니다.
ease-out 천천히 끝납니다.
ease-in-out 천천히 시작되어 천천히 끝납니다.
cubic-bezier(n,n,n,n) 정의한 큐빅 베지어 함수에 따라 진행됩니다.(개발자도구로 간단히 설정가능합니다)

animation:이름 1s ease;
animation-timing-function:ease-out;

See the Pen CSS-animation-example1 by yuna122212 (@yuna122212) on CodePen.

애니메이션 지연시간 delay

애니메이션 시작 전 지연시간을 설정합니다.(기본값 0)

1s 입력 시 1초 후 애니메이션이 시작합니다.

/*즉시 시작*/
animation:이름 1s ease 0;
animation-delay:1s;

애니메이션 반복 횟수 iteration-count

애니메이션의 반복횟수를 지정합니다. 단위 없이 숫자 입력.

무한반복은 infinite로 입력합니다.

animation:이름 1s 3; /*지속시간 1초 간격으로 3번 재생합니다.*/
animation-iteration-count:infinite; /*infinite 무한으로 반복됩니다.*/

애니메이션 재생방법 direction

애니메이션의 재생방법을 지정합니다.(기본 normal)

(아래 HTML/CSS를 기준으로 한 재생방법 예시입니다.)

<div class="box" style="width:200px; height:200px; background:lime;">box</div>

재생방법1. alternate 정방향 -> 역방향 -> 정방향

* 재생횟수를 짝수 기준(2회 이상) 설정하여 확인해야 합니다.

* 1턴(정방향) 2턴(역방향)으로 즉시이동이 아닌 역방향 애니메이션이 진행됩니다.

.box {
  animation:box_position 1s 2 alternate;
}
@keyframes box_position {
  0% {transform:translateX(0)}
  100% {transform:translateX(500px)}
}

재생방법2. reverse 역방향

* 재생횟수와 관계 없습니다.

* 기본(normal)이 역방향(reverse)로 동작합니다.

.box {
  animation:box_position 1s 1 reverse;
}
@keyframes box_position {
  0% {transform:translateX(0)}
  100% {transform:translateX(500px)}
}

재생방법3. alternate-reverse 역방향 -> 정방향 -> 역방향

* 재생횟수를 홀수 기준(1 또는 3회 이상) 설정하여 확인해야 합니다.

* 재생횟수 관계 없이 애니메이션 종료 위치는 @keyframes에 등록된 시작 위치로 이동합니다.

* 1턴(역방향) 2턴(순방향)으로 처음부터 reverse(역)방향으로 시작합니다.

.box {
  animation:box_position 1s 3 alternate-reverse;
}
@keyframes box_position {
  0% {transform:translateX(0)}
  100% {transform:translateX(500px)}
}

애니메이션 시작/종료 fill-mode

애니메이션이 시작 전 또는 종료 후 어떤 값이 적용될지 지정합니다.(기본값 none)

(아래 HTML/CSS를 기준으로 한 재생방법 예시입니다.)

<div class="box" style="width:200px; height:200px; background:lime;">box</div>

시작/종료 방법 1. forwards 종료위치 정지

* @keyframes 시작 위치와 상관없이 animation-direction 방향에 따라 종료 위치에서 정지합니다.

@keyframes box_position {
  0% {transform:translateX(0)}
  100% {transform:translateX(500px)}
}
.box {
  animation:box_position 1s 2 alternate-reverse forwards;
}

시작/종료 방법 2. backwards 시작위치 정지

* animation-direction 관계없이 @keyframes 에 설정된 시작 위치에서 정지합니다.

@keyframes box_position {
  0% {transform:translateX(0)}
  100% {transform:translateX(500px)}
}
.box {
  animation:box_position 1s 2 alternate-reverse backwards;
}

시작/종료 방법 3. both 시작/종료 위치 조합 자동설정

* animation-direction 방향에 따라 시작/종료 위치를 조합하여 자동으로 위치를 설정합니다.

@keyframes box_position {
  0% {transform:translateX(0)}
  100% {transform:translateX(500px)}
}
.box {
  animation:box_position 1s 2 alternate-reverse both;
}

애니메이션 재생&일시정지 animation-play-state

* 상태 선택자 및 자바스크립트 이벤트 등을 통하여 애니메이션 재생 중 일시정지를 할 수 있습니다.

(정지 중이라면 반대로 재생되는 것도 가능)

* 보통 iteration-count(재생횟수)를 infinite(무한반복)으로 설정한 경우 필요에 따라 사용합니다.

* :hover 선택자 사용 시 해당 이벤트경우에만 일시정지 되고 마우스를 바깥으로 이동하면 바로 다시 기본값(재생)으로 돌아옵니다.

* 재생 running(기본값)

* 일시정지 paused

/*특정 요소에 마우스 올렸을 때 재생 중인 애니메이션 정지*/
selector:hover {
	animation-play-state:paused
}

애니메이션 통합 속성 순서

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

animation:sample 1s linear forwards;
animation:sample 1s linear infinite alternate;
animation:sample 1s linear 3;

@keyframes, animation 적용 예시(투명도 애니메이션)

1. HTML 준비

<div class="target"></div>

2. @Keyframes 선언하기

@keyframes ani {
  0% {opacity:0;}
  100% {opacity:1;}
}

3. CSS 기본값 작성 후 keyframe 애니메이션 호출하기

.target {animation:ani 1s;}

Comments, Trackbacks