[CSS] animation에 대해 알아봅시다

CSS의 animation은 단어 그대로 html에 애니메이션을 입힐 수 있는 속성입니다.

animation의 활용법은 무궁무진합니다.
가끔 코드팬을 둘러보면 무척 재밌고 유쾌한 코드들이 많이 있습니다
시간이 있으실 경우 구글에 “codepen animation”이라고 검색해 보시면 다양한 개성의 코드들을 만나 보실 수 있을 겁니다.

---

실 사용법:

marquee 효과:

See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen.

 

파도 애니메이션:

See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen.

 

위처럼 다양한 애니메이션을 넣어주실 수 있습니다. 어떤 분은 버튼에, 어떤 분은 백그라운드에, 어떤 분은 푸터에 애니메이션을 넣기도 합니다.

아래는 animation 속성에 대한 딱딱한 지식이 제공될 겁니다.
다소 난해할 수 있습니다만, 위 예제들을 참고하시면서 이 값 저 값을 넣어보면 금방 익숙해지실 겁니다.
그럼 앞으로 VS Code에서 다양한 코드를 실험해보시면서 재밌는 animation 코드들을 만들어보시기를 바랍니다!

---

CSS 애니메이션의 구성 요소

CSS 애니메이션은 두 가지 방식으로 구성됩니다:

1. @keyframes

• 애니메이션의 단계별 상태를 정의합니다.
• from(0%)과 to(100%)를 사용하거나, 중간 단계를 0% ~ 100%로 나눠 정의할 수 있습니다.
• 예:

@keyframes example {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(100px);
  }
}

@keyframes example {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

 

2. CSS 속성 설정

• animation 속성이나 개별 속성을 사용하여 애니메이션을 요소에 적용합니다.

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: example 2s ease-in-out infinite;
}

---

CSS 애니메이션의 주요 속성

animation-name

• 설명: 애니메이션에 사용할 @keyframes 이름을 지정합니다.
• 사용 예시: @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .box { animation-name: fadeIn; }

 

animation-duration

• 설명: 애니메이션이 한 번 실행되는 데 걸리는 시간을 설정합니다.
• 단위: 초(s), 밀리초(ms)
• 기본값: 0s (애니메이션 없음)
• 사용 예시: .box { animation-duration: 2s; /* 애니메이션이 2초 동안 실행 */ }

 

animation-timing-function

• 설명: 애니메이션이 진행되는 동안의 가속도와 감속도를 설정합니다.
• 값:
  • linear: 일정한 속도
  • ease: 느리게 시작 → 빨라짐 → 느리게 끝남 (기본값)
  • ease-in: 느리게 시작
  • ease-out: 느리게 끝남
  • ease-in-out: 느리게 시작하고 끝남
  • cubic-bezier(x1, y1, x2, y2): 사용자 정의 곡선
• 사용 예시: .box { animation-timing-function: ease-in-out; }

 

animation-delay

• 설명: 애니메이션이 시작되기 전에 대기하는 시간을 설정합니다.
• 단위: 초(s), 밀리초(ms)
• 기본값: 0s (지연 없음)
• 음수 값: 애니메이션이 중간부터 시작합니다. (예: 2s는 애니메이션이 이미 2초 실행된 상태에서 시작)
• 사용 예시: .box { animation-delay: 1s; /* 애니메이션 시작 전 1초 대기 */ }

 

animation-iteration-count

• 설명: 애니메이션 반복 횟수를 설정합니다.
• 값:
  • 숫자 값: 정해진 횟수만큼 반복
  • infinite: 무한 반복
• 기본값: 1 (한 번 실행)
• 사용 예시: .box { animation-iteration-count: infinite; /* 무한 반복 */ }

 

animation-direction

• 설명: 애니메이션의 재생 방향을 설정합니다.
• 값:
  • normal(기본값): 정방향으로 실행
  • reverse: 역방향으로 실행
  • alternate: 정방향 → 역방향 교대로 실행
  • alternate-reverse: 역방향 → 정방향 교대로 실행
• 사용 예시: .box { animation-direction: alternate; /* 정방향-역방향 교대로 실행 */ }

 

animation-fill-mode

• 설명: 애니메이션이 실행되기 전(animation-delay 동안)과 종료 후 상태를 설정합니다.
• 값:
  • none(기본값): 애니메이션 실행 전후의 스타일 변경 없음
  • forwards: 애니메이션 종료 후 마지막 상태 유지
  • backwards: 애니메이션 시작 전 첫 번째 상태 유지
  • both: forwards와 backwards 효과를 모두 적용
• 사용 예시: .box { animation-fill-mode: forwards; /* 애니메이션 종료 후 상태 유지 */ }

 

animation-play-state

• 설명: 애니메이션의 재생 여부를 제어합니다.
• 값:
  • running: 애니메이션 재생
  • paused: 애니메이션 일시정지
• 사용 예시: .box { animation-play-state: paused; /* 애니메이션 일시정지 */ }

---

animation 압축형 사용하는 방법

• animation은 위에 적은 예시들을 순서대로 한 코드에 집약할 수 있습니다.
• 순서는 이시이지반방마입니다.
  다같이 따라해 봅시다. 이시이지반방마! (저는 이렇게 배웠습니다.)
  이시이지반방마: 이름, 시간, 이징, 지연, 반복, 방향, 마지막
  이름과 시간은 필수로 적어야 합니다.
• 사용 예시: animation: bounce 2s ease-in-out 1s infinite alternate both running;