[CSS] 애니메이션(Animation)

 

CSS3 애니메이션은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다.

애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 구성되어 집니다.

그리고 애니메이션은 트랜지션보다 훨씬 더 규모가 크고 복잡하며 다양한 능력을 가지고 있기 때문에 좀 더 정밀한 효과를 구현할 수 있습니다.

 

 

애니메이션 장점

CSS 애니메이션은 기존에 사용되던 자바스크립트를 이용한 애니메이션보다 다음 세 가지 이유에서 이점을 가집니다.

• 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있습니다.
• 자바스크립트를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못할때가 있습니다. CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링됩니다.
• 브라우저는 애니메이션의 성능을 효율적으로 최적화할 수 있습니다. 예를 들어 현재 안보이는 엘리먼트에 대한 애니메이션은 업데이트 주기를 줄여 부하를 최소화할 수 있습니다.

animation 속성도 transition 과 유사하게 단일속성과 속기형으로 작성할 수 있습니다.

animation 은 위에서 언급했듯이 animation-* 속성과 애니메이션의 중간상태를 정의할 수 있는 @keyframes 으로 구성되어 있습니다.

 

먼저 animation 의 단일 속성에 대해 간단히 살펴봅니다.

• animation-name : 애니메이션의 중간 상태를 지정하기 위한 이름을 정의합니다. 중간 상태는 @keyframes 규칙을 이용하여 기술합니다.
• animation-duration : 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다.
• animation-delay :엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정합니다.
• animation-direction : 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다.
• animation-iteration-count : 애니메이션이 몇 번 반복될지 지정합니다. infinite 로 지정하여 무한히 반복할 수 있습니다.
• animation-play-state : 애니메이션을 멈추거나 다시 시작할 수 있습니다.
• animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정합니다.
• animation-fill-mode : 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다.

/* 단일 속성 */ 
  .object {
	animation-name: 1s; 
	animation-duration: 2s; 
	animation-delay: 1s; 
	animation-direction: alternate; 
	animation-iteration-count: 3; 
	animation-play-state: paused; 
	animation-timing-function: 1s; 
	animation-fill-mode: both;
   } 

/* 속기형 */ 

animation: name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state> [,...];

animation-name

name 은 @keyframes 속성에서 설정한 애니메이션의 이름이다. 이름을 설정해야 애니메이션을 재생할 수 있습니다.즉, 이름을 정의해야 애니메이션을 재생(호출)할 수 있습니다.

유효한 이름과 유효하지 않은 이름

/* 유효한 이름 */ 
animation-name: name; /* 문자열로 시작하는 이름 */ 
animation-name: _name; /* 언더바(_)로 시작하는 이름 */ 
animation-name: -name; /* 하이픈(-)으로 시작하는 이름 */

/* 유효하지 않은 이름 */
animation-name: 1name; /* 숫자로 시작하는 이름 */ 
animation-name: @name; /* 특수 문자로 시작하는 이름 */

다음 예제를 보겠습니다.

div{
  position:absolute;
  left:100px;
  width:100px;
  height:50px;
  margin-left:-50px;
  background-color:#000;
  color:#fff;
  /* 애니메이션 이름 */
  animation-name: jaehee;
  animation-duration:2s;
  animation-duration: leaner;
  animation-iteration-count:3;
  animation-direction:alternate;
  animation-fill-mode: forwards;
}

/* 키프레임 이름 = 애니메이션 이름 */
@keyframes jaehee {
  0% {
    left:100px;
  }
  100% {
    left:300px;
  }
}

animation-duration

animation-duration 은 애니메이션을 한 번 재생하는 데 걸리는 시간을 설정할 수 있으며, transition-duration 과 유사합니다.

div{
  position:absolute;
  left:100px;
  width:100px;
  height:50px;
  margin-left:-50px;
  background-color:#000;
  border:solid 1px #000;
  color:#fff;
  /* animation-name:duration; */
}

.s {
  top:140px;
  animation-duration:2s
}
.ms{
  top:200px;
  animation-duration:-2ms
}

@-webkit-keyframes duration{
  from{
    left:100px;
    background-color:#fff;
  }
  to{
    left:300px;
    background-color:#999;
  }
}

값이 음수(-2ms)나 0으로 설정하면 애니메이션은 재생되지 않습니다. 속성의 값을 2s 로 설정하면 사각형이 2초 동안 화면 왼쪽에서 오른쪽으로 이동하는 애니메이션이 재생됩니다.

animation-delay

animation-delay 속성은 애니메이션 시작을 지연할 시간을 설정하는 것으로 다음과 같은 값을 사용할 수 있습니다.

• 0 : 속성을 적용하자마자 애니메이션을 시작합니다(기본값).
• now :속성을 적용하자마자 애니메이션을 시작합니다. 0으로 설정한 것과 같다. iOS2.0부터 사용할 수 있습니다.
• 숫자와 단위 : 설정한 시간이 지난 뒤에 애니메이션을 시작합니다.

사용할 수 있는 단위는 초(s)와 밀리초 (ms)입니다. 값이 양수면 속성을 적용한 순간부터 시간을 계산해 애니메이션 재생을 지연합니다. 값이 음수면 속성을 적용한 순간 바로 애니메이션을 실행하지만, 지정한 시간이 지난 뒤의 장면부터 애니메이션을 재생합니다.

.now{
  top:80px;
  animation-delay:now
}
.s{
  top:140px;
  animation-delay:2s
}
.minus{
  top:200px;
  animation-delay:-1s
}

@-webkit-keyframes boxDelay{
  from{
    left:100px;
  }
  to{
    left:300px;
  }
}

div{
  position:absolute;
  left:100px;
  width:100px;
  height:50px;
  background:#000;
  color:#fff;
  /* animation-name:boxDelay; */
  animation-timing-function:linear;
 animation-duration:2s
}

속성값을 now 혹은 0으로 설정하면 애니메이션이 바로 재생되고, 속성값을 2s로 설정한 예제는 사각형을 클릭하면 2초 후 애니메이션이 재생됩니다. 속성값을 음수(-1s)로 설정한 예제는 1초가 지난 후인, 화면 가운데 위치의 장면부터 애니메이션이 재생되는 것입니다.

animation-direction

animation-direction 은 애니메이션 재생 방향을 정의하는 속성입니다.

@keyframes 속성의 from 에 설정한 스타일에서 to에 설정한 스타일로 재생하는 것이 순방향이고, to에 설정한 스타일에서 from 에 설정한 스타일로 재생하는 것이 역방향입니다.

animation-direction 은 다음과 같은 값이 있습니다.

 

• normal : 애니메이션을 순방향으로 재생한다(기본값). 재생이 한 번 끝나면 첫 번째 프레임부터 다시 시작한다.
• alternate : 순방향으로 애니메이션을 시작해 역방향과 순방향으로 번갈아 애니메이션을 재생한다. 홀수 번째로 재생할 때는 순방향으로 재생하고, 짝수 번째로 재생할 때는 역방향으로 재생한다.
• reverse : 애니메이션을 역방향으로 재생한다. 재생이 한 번 끝나면 마지막 프레임부터 다시 시작한다.
• alternate-reverse : 역방향으로 애니메이션을 시작해 순방향과 역방향으로 번갈아 애니메이션을 재생한다. 홀수 번째로 재생할 때는 역방향으로 재생하고, 짝수 번째로 재생할 때는 순방향으로 재생한다.

 

 

.normal{
  top:20;
  animation-direction:normal;
}
.alternate{
  top:80px;
  animation-direction:alternate;
}
.reverse{
  top:140px;
  animation-direction:reverse;
}
.a_reverse{
  top:200px;
  animation-direction:alternate-reverse;
}

@-webkit-keyframes direction {
  from{
    left:40px;
  }
  to{
    left:300px;
  }
}

div{
  position:absolute;
  left:40px;
  width:150px;
  height:50px;
  background:#000;
  color:#fff;
  /* animation-name:direction; */
  animation-duration:2s;
  animation-iteration-count:3;
}

• 첫 번째 박스를 실행(사각형을 클릭)하면 사각형이 화면 왼쪽에서 오른쪽으로 이동하는 애니메이션 재생됩니다. animation-direction 속성값을 normal 로 설정했기 때문에 한 번 재생이 끝나 면 사각형이 다시 화면 왼쪽에서 오른쪽으로 이동하게 됩니다.
• alternate 속성값은 순방향으로 애니메이션 재생을 시작해 역방향과 순방향으로 번갈아 가며 방향을 바꿔 가며 애니메이션을 재생하게 됩니다.
• 두 번째 사각형을 클릭하면 처음에는 사각형이 순방향인 화면 왼쪽에서 오른쪽으로 이동하다가 애니메이션이 두 번째로 재생될 때는 사각형이 역방향인 오른쪽에서 왼쪽으로 이동하게 됩니다. 세 번째로 재생될 때는 다시 순방향인 왼쪽에서 오른쪽으로 이동합니다.
• 세 번째 박스는 animation-direction 속성값을 reverse 로 설정했기 때문에 한 번 재생이 끝나면 사각형이 다시 화면 오른쪽에서 왼쪽으로 이동한다. 
• 네 번째 박스의 alternate-reverse 속성값은 역방향으로 애니메이션 재생을 시작해 순방향과 역방향으로 방향을 바꿔 가며 애니메이션을 재생합니다.