[필기] CSS 기초 (7) - 반응웹을 위한 Animation
`animation` 속성
chatGTP
`animation` 속성은 CSS에서 요소에 애니메이션 효과를 적용하는 데 사용되는 속성입니다. 애니메이션은 요소의 스타일을 시간에 따라 부드럽게 변화시켜 동적인 효과를 만들어줍니다. 주요한 속성들을 아래에 정리해드리겠습니다:
1. `animation-name`:
- `animation-name` 속성은 적용할 애니메이션의 이름을 지정합니다.
- `@keyframes` 규칙으로 정의한 애니메이션 이름을 사용합니다.
- 예를 들어, `animation-name: slide-in;`는 `@keyframes slide-in { ... }`에서 정의한 애니메이션을 적용합니다.
2. `animation-duration`:
- `animation-duration` 속성은 애니메이션의 지속 시간을 설정합니다.
- 시간은 초(s) 또는 밀리초(ms) 단위로 지정합니다.
- 예를 들어, `animation-duration: 2s;`는 애니메이션 효과가 2초 동안 지속되도록 합니다.
3. `animation-timing-function`:
- `animation-timing-function` 속성은 애니메이션의 시간 경과에 따른 변화 속도를 지정합니다.
- 다양한 속도 함수(ease, linear, ease-in, ease-out, ease-in-out 등)를 사용할 수 있습니다.
- 예를 들어, `animation-timing-function: ease-in-out;`는 애니메이션의 시작과 끝 부분이 느리고 중간 부분이 빠르게 진행되는 함수를 적용합니다.
4. `animation-delay`:
- `animation-delay` 속성은 애니메이션의 시작을 지연시킵니다.
- 시간은 초(s) 또는 밀리초(ms) 단위로 지정합니다.
- 예를 들어, `animation-delay: 1s;`는 애니메이션 효과가 1초 뒤에 시작되도록 합니다.
5. `animation-iteration-count`:
- `animation-iteration-count` 속성은 애니메이션의 반복 횟수를 설정합니다.
- 기본값은 `1`이며, `infinite`를 지정하면 무한 반복됩니다.
6. `animation-direction`:
- `animation-direction` 속성은 애니메이션의 반복 방향을 설정합니다.
- `normal`은 순방향으로 반복되고, `alternate`는 순방향과 역방향으로 번갈아가며 반복됩니다.
7. `animation-fill-mode`:
- `animation-fill-mode` 속성은 애니메이션이 실행되기 전과 후의 스타일을 지정합니다.
- `forwards`는 애니메이션이 종료된 시점의 스타일을 유지합니다.
8. `animation-play-state`:
- `animation-play-state` 속성은 애니메이션의 실행/일시정지 상태를 지정합니다.
- `running`은 애니메이션을 실행하고, `paused`는 애니메이션을 일시정지합니다.
`animation` 속성을 사용하여 요소에 애니메이션 효과를 적용하면, 웹 페이지에 동적이고 화려한 효과를 쉽게 구현할 수 있습니다. `@keyframes` 규칙으로 정의한 애니메이션과 `animation` 속성을 조합하여 다양한 애니메이션 효과를 만들 수 있습니다.