[CSS] animation

animation

animation 속성은 요소에 애니메이션을 적용하는 데 사용합니다. @keyframes로 정의한 애니메이션을 실제로 적용할 때 사용되기도 합니다.

animation 속성 구조

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

1. duration: 애니메이션의 지속 시간을 지정합니다. 초(s) 또는 밀리초(ms) 단위로 표시됩니다.
2. timing-function: 애니메이션의 타이밍 함수를 지정합니다. 이는 애니메이션이 어떻게 진행되는지 제어합니다. 일반적으로 사용되는 값으로는 ease, linear, ease-in, ease-out, ease-in-out 등이 있습니다.
3. delay: 애니메이션 시작 전에 대기하는 시간을 지정합니다. 초(s) 또는 밀리초(ms) 단위로 표시됩니다.
4. iteration-count: 애니메이션의 반복 횟수를 지정합니다. infinite를 사용하면 무한 반복됩니다.
5. direction: 애니메이션의 방향을 지정합니다. normal은 애니메이션이 정방향으로 진행되고, reverse는 역방향으로 진행됩니다.
6. fill-mode: 애니메이션의 최종 키프레임이 적용되는 방식을 지정합니다. forwards는 애니메이션이 종료된 후에 최종 키프레임이 유지되고, backwards는 애니메이션 시작 전에 최초 키프레임이 적용됩니다.
7. play-state: 애니메이션의 재생 상태를 지정합니다. running은 애니메이션이 실행 중인 상태이며, paused는 애니메이션이 정지된 상태입니다.
8. name: 애니메이션의 이름을 지정합니다. 이는 @keyframes 규칙에서 정의한 애니메이션 이름과 일치해야 합니다.

🔍 출처

https://developer.mozilla.org/ko/docs/Web/CSS/animation