CSS 애니메이션

1. 개념

CSS 애니메이션은 웹 요소에 시간에 따라 변화하는 스타일을 적용하여 이동, 크기 변환, 회전 등의 효과를 만들 수 있다.

2. 구성

@keyframes 규칙과 animation 속성으로 구성된다.

• `@keyframes` 규칙: 애니메이션 중간에 적용할 스타일을 정의한다. 0%에서 100%까지, 혹은 from과 to를 사용하여 시작과 끝 스타일을 지정할 수 있다.
• `animation` 속성: @keyframes 규칙을 웹 요소에 적용하며, 지속 시간, 타이밍 함수, 반복 횟수 등을 설정한다.

3. 세부 속성

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

• animation-name: @keyframes 규칙에서 정의한 애니메이션 이름
• animation-duration: 1회 재생의 소요 시간. s, ms 단위로 지정 가능
• animation-timing-function: 진행 속도 조절
  • linear / ease / ease-in / ease-out / ease-in-out: in은 시작, out은 끝
  • step-start / step-end / steps(n, direction): 각 키프레임에서의 동작 지정, 계단 효과
  • cubic-bezier(n,n,n,n): 사용자 속도 정의 함수
  • 아래 그래프는 곡선의 기울기로 애니메이션의 속도 변화를 표시한다. 경사가 클수록 더 빠른 것.

    

• animation-delay: 시작 전 대기 시간. s, ms 단위로 지정
• animation-iteration-count: 실행 횟수
  • 숫자 / infinite
• animation-direction: 진행 방향
  
  • normal: 정방향
  • reverse: 역방향
  • alternate: 왕복(normal-reverse)
  • alternate-reverse: 역왕복(reverse-normal)
• animation-fill-mode: 동작 전후의 스타일 지정
  • none(기본값)
  • forwards: 종료 후 마지막 프레임 스타일 유지
  • backwards: 동작 전 첫 프레임 스타일 적용
  • both: forwards + backwards
• animation-play-state: 재생 상태
  • running: 재생
  • paused: 일시정지

 

4. 예시

/* 깜빡이는 애니메이션 */
@keyframes blink-effect {
  50% {
    opacity: 0;
  }
}

.blink {
  animation: blink-effect 1s step-end infinite;
  /*
    animation-name: blink-effect;
    animation-duration: 1s;
    animation-iteration-count:infinite;
    animation-timing-function:step-end;
  */
}