애니메이션과 변환: CSS를 사용한 애니메이션 및 요소의 변환 효과를 추가

CSS 애니메이션(Animation)

CSS 애니메이션은 웹 페이지의 요소에 시간에 따른 시각적 변화를 줍니다. 주요 속성은 다음과 같습니다:

1. Animation Name (애니메이션 이름):
   • animation-name: 애니메이션의 이름을 지정합니다. @keyframes 규칙을 통해 생성한 애니메이션 이름을 여기에 지정합니다.
2. Animation Duration (애니메이션 지속 시간):
   • animation-duration: 애니메이션이 한 번 실행되는 데 걸리는 시간을 정합니다. 예: 2s, 500ms 등.
3. Animation Timing Function (애니메이션 타이밍 함수):
   • animation-timing-function: 애니메이션의 속도 곡선을 정의합니다. ease, linear, ease-in, ease-out, ease-in-out와 같은 내장 함수를 사용할 수 있습니다.
4. Animation Delay (애니메이션 지연 시간):
   • animation-delay: 애니메이션 시작 전 대기하는 시간을 설정합니다.
5. Animation Iteration Count (애니메이션 반복 횟수):
   • animation-iteration-count: 애니메이션이 몇 번 반복될지 설정합니다. infinite로 설정하면 무한 반복합니다.
6. Animation Direction (애니메이션 방향):
   • animation-direction: 애니메이션이 순방향, 역방향, 또는 번갈아가며 실행될지 결정합니다.
7. Animation Fill Mode (애니메이션 채우기 모드):
   • animation-fill-mode: 애니메이션 시작 전과 끝난 후 요소의 스타일을 어떻게 처리할지 결정합니다.
8. Animation Play State (애니메이션 재생 상태):
   • animation-play-state: 애니메이션을 실행 중지하거나 다시 시작합니다.

CSS 변환(Transform)

변환 기능은 요소의 모양, 크기, 위치를 변화시킵니다:

1. Transform Translate (이동):
   • transform: translate(X, Y): 요소를 X축과 Y축 방향으로 이동시킵니다.
2. Transform Scale (크기 조정):
   • transform: scale(X, Y): 요소의 크기를 조정합니다. X와 Y 축의 크기 비율을 변경할 수 있습니다.
3. Transform Rotate (회전):
   • transform: rotate(Angle): 요소를 주어진 각도만큼 회전시킵니다.
4. Transform Skew (기울이기):
   • transform: skew(X-Angle, Y-Angle): 요소를 X축과 Y축으로 기울입니다.