css 애니메이션 속성 정리

CSS 애니메이션은 웹 페이지에서 요소들을 부드럽게 움직이거나 변화시키는 기술을 말합니다. 이를 통해 웹 페이지를 더 흥미롭고 시각적으로 매력적으로 만들 수 있습니다. CSS 애니메이션은 특정 상태와 속성을 정의하고, 애니메이션의 지속 시간과 반복 등을 설정하여 구현합니다.

CSS 애니메이션 주요 속성

1. @keyframes: 애니메이션의 키프레임(시작과 끝 지점)을 정의하는 규칙입니다. 키프레임은 애니메이션 동작의 각 단계를 의미합니다.

2. animation-name: @keyframes 규칙의 이름을 지정합니다. 이 이름을 요소의 animation 속성에 할당하여 키프레임 애니메이션을 적용합니다.

3. animation-duration: 애니메이션의 지속 시간을 설정합니다. 초 단위로 지정하며, 기본값은 0입니다.

4. animation-timing-function: 애니메이션의 시간 진행에 따른 변화 패턴을 설정합니다. 예를 들어, ease, linear, ease-in, ease-out, ease-in-out 등이 있습니다. ➡️비교하기

 

4-1. ease: 이 값은 기본값으로 가장 많이 사용되는 타이밍 함수입니다. 처음에는 느리게 시작하여 점점 빨라지다가, 끝에 다가가면서 다시 느려지는 형태의 애니메이션을 만듭니다. 처음과 끝이 부드럽게 변하는 효과를 가지고 있어서 자연스러운 애니메이션을 만들 수 있습니다.

4-2. linear: 이 값은 애니메이션이 일정한 속도로 진행되는 선형적인 애니메이션을 만듭니다. 속도가 변하지 않으므로 애니메이션의 시작과 끝이 뚜렷하게 보입니다.

4-3. ease-in: 이 값은 처음에는 천천히 시작하면서 점점 빨라지는 애니메이션을 만듭니다. 즉, 처음에는 느리게 진행하다가 점점 빨라지면서 끝에 도달합니다.

4-4. ease-out: 이 값은 처음에는 빠르게 시작하면서 점점 느려지는 애니메이션을 만듭니다. 즉, 처음에 빨리 진행하다가 끝에 다다를 때 천천히 멈추게 됩니다.

4-5. ease-in-out: 이 값은 ease-in과 ease-out의 조합으로, 처음에는 천천히 시작하여 가속하고, 끝에 가까워질수록 천천히 멈추는 애니메이션을 만듭니다. 가장 자연스러운 느낌의 애니메이션 중 하나입니다.

5. animation-delay: 애니메이션 시작 전에 대기하는 시간을 설정합니다. 초 단위로 지정할 수 있으며, 기본값은 0입니다.

6. animation-iteration-count: 애니메이션 반복 횟수를 설정합니다. 정수 또는 infinite를 사용하여 무한 반복할 수 있습니다.

7. animation-direction: 애니메이션의 재생 방향을 설정합니다. normal, reverse, alternate, alternate-reverse 등이 있습니다. ➡️비교하기

 

7-1. normal: 이 값은 애니메이션을 정상적으로 재생합니다. 즉, 애니메이션은 시작 지점에서 끝 지점까지 정상적으로 진행되며, 이때 @keyframes의 선언 순서에 따라 애니메이션 키프레임이 재생됩니다.

7-2. reverse: 이 값은 애니메이션을 역방향으로 재생합니다. 즉, 애니메이션은 끝 지점에서 시작 지점까지 역으로 진행되며, @keyframes의 선언 순서에 반대로 애니메이션 키프레임이 재생됩니다.

7-3. alternate: 이 값은 애니메이션을 정상적으로 시작하고, 끝 지점에 도달하면 다시 역방향으로 반복해서 재생합니다. 즉, normal과 reverse를 번갈아가며 재생하는 형태입니다.

7-4. alternate-reverse: 이 값은 alternate와 유사하지만, 시작 방향이 반대로 역방향으로 시작하고, 끝 지점에서 다시 정상 방향으로 반복해서 재생합니다.

8. animation-fill-mode: 애니메이션 시작 전과 종료 후 요소의 스타일을 설정합니다. none, forwards, backwards, both 등이 있습니다. ➡️비교하기

 

8-1. none: 이 값은 애니메이션의 실행 전과 실행 후의 스타일을 변경하지 않습니다. 즉, 애니메이션이 실행되지 않는 동안 요소는 @keyframes에 정의된 스타일을 적용하지 않습니다. 애니메이션이 끝나면 요소는 @keyframes에 정의된 최종 스타일을 적용하지 않습니다.

8-2. forwards: 이 값은 애니메이션의 실행 후의 스타일을 유지합니다. 즉, 애니메이션이 끝나면 요소는 @keyframes에 정의된 최종 스타일을 유지합니다.

8-3. backwards: 이 값은 애니메이션의 실행 전의 스타일을 적용합니다. 즉, 애니메이션이 시작되기 전에 요소는 @keyframes의 첫 번째 키프레임 스타일을 적용합니다.

8-4. both: 이 값은 forwards와 backwards를 결합한 효과를 가집니다. 즉, 애니메이션이 끝나면 요소는 @keyframes에 정의된 최종 스타일을 유지하며, 애니메이션이 시작되기 전에 요소는 @keyframes의 첫 번째 키프레임 스타일을 적용합니다.

9. animation-play-state: 애니메이션을 일시 중지(paused)하거나 재생(running)시킬지 설정합니다.

 

간단한 예시를 만들겠습니다.

 

html

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

css

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: spin;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: backwards;
}

@keyframes spin {
  0% { transform: rotate(0deg) scale(1); opacity: 1; }
  50% { transform: rotate(180deg) scale(1.5); opacity: 0.5; }
  100% { transform: rotate(360deg) scale(1); opacity: 1; }
}

 

결과

 

 

 

 

 

이 예시는 파란색 박스를 시계 방향으로 360도 회전시키면서 크기를 변화시키는 애니메이션을 구현합니다. 

애니메이션은 3초 동안 지속되며, 시작 전 1초 대기한 후에 무한 반복되면서 반복 시간마다 역방향으로 회전합니다.