애니메이션

CSS 애니메이션 관련 속성 클래스입니다. 개별 속성 클래스와 an 접두사를 사용한 animation shorthand를 모두 지원합니다.

Animation Shorthand

an + 이름 + 시간 + 타이밍 + 반복 횟수 + fill-mode로 animation 단축 속성을 조합합니다.

an{name}-{duration}-{timing}-{iteration}-{fillMode}

부분	역할	예시
`an`	animation 접두사 (필수)	an
`{name}`	keyframe 이름 (필수)	fadeIn, slideUp, pulse
`{duration}`	지속 시간 (필수)	1s, 500ms, 1-5s
`{timing}`	타이밍 함수 (선택)	ease, linear, ease-in-out
`{iteration}`	반복 횟수 (선택)	infinite, 3
`{fillMode}`	fill-mode (선택)	forwards, backwards, both

anfadeIn-1s-ease=an(animation)+fadeIn(이름)+1s(시간)+ease(타이밍)

사용 예시

클래스	CSS
`anfadeIn-1s-ease`	animation: fadeIn 1s ease
`anfadeIn-500ms-linear`	animation: fadeIn 500ms linear
`anslideUp-1s-ease-in-out`	animation: slideUp 1s ease-in-out
`anslideDown-300ms`	animation: slideDown 300ms
`anfadeIn-1s-ease-infinite`	animation: fadeIn 1s ease infinite
`anpulse-2s-ease-in-out-infinite`	animation: pulse 2s ease-in-out infinite
`anbounce-1s-ease-3`	animation: bounce 1s ease 3
`anspinCW-2s-linear-infinite`	animation: spinCW 2s linear infinite
`anfadeIn-1s-ease-in-out-infinite-forwards`	animation: fadeIn 1s ease-in-out infinite forwards

프리셋 Keyframes

아래 이름을 사용하면 @keyframes 규칙이 CSS에 자동으로 삽입됩니다. 커스텀 이름도 사용 가능하지만, 이 경우 @keyframes는 직접 작성해야 합니다.

이름	효과	사용 예시
`fadeIn`	투명 → 불투명	`anfadeIn-1s-ease`
`fadeOut`	불투명 → 투명	`anfadeOut-500ms-ease`
`slideUp`	아래에서 위로 슬라이드	`anslideUp-1s-ease-in-out`
`slideDown`	위에서 아래로 슬라이드	`anslideDown-300ms`
`slideLeft`	오른쪽에서 왼쪽으로 슬라이드	`anslideLeft-500ms-ease`
`slideRight`	왼쪽에서 오른쪽으로 슬라이드	`anslideRight-500ms-ease`
`zoomIn`	확대되며 나타남	`anzoomIn-500ms-ease`
`zoomOut`	축소되며 사라짐	`anzoomOut-500ms-ease`
`spinCW`	시계 방향 회전	`anspinCW-2s-linear-infinite`
`spinCCW`	반시계 방향 회전	`anspinCCW-2s-linear-infinite`
`bounce`	바운스 효과	`anbounce-1s-ease`
`pulse`	맥박처럼 확대/축소	`anpulse-2s-ease-in-out-infinite`
`shake`	좌우 흔들림	`anshake-500ms-ease`
`flip`	Y축 회전 (카드 뒤집기)	`anflip-1s-ease`
`swing`	좌우 흔들리며 정지	`answing-1s-ease`
`rubberBand`	고무줄처럼 늘어났다 돌아옴	`anrubberBand-1s-ease`
`blink`	깜빡임	`anblink-1s-ease-infinite`

코드 예시

<!-- 페이드 인 -->
<div class="anfadeIn-1s-ease">나타나는 요소</div>

<!-- 무한 회전 로딩 -->
<div class="anspinCW-2s-linear-infinite w4rem h4rem">
  <svg>...</svg>
</div>

<!-- 바운스 알림 뱃지 -->
<span class="anbounce-1s-ease bg6366F1 cFFFFFF br50p w2-4rem h2-4rem df jcc aic">3</span>

<!-- 호버 시 흔들림 -->
<button class="hover-anshake-500ms-ease bg18181B cFFFFFF py12px px2-4rem br8px">
  호버하세요
</button>

<!-- 카드 등장 (슬라이드 업 + fill forwards) -->
<div class="anslideUp-500ms-ease-in-out-infinite-forwards bg0F0F17 p2rem br8px">
  카드 콘텐츠
</div>

커스텀 Keyframe 사용

프리셋에 없는 이름도 자유롭게 사용할 수 있습니다. 예: anmyCustom-1s-ease. 단, 해당 @keyframes 규칙은 별도 CSS 파일에 직접 작성해야 합니다.

Play State

클래스	CSS
`apsr`	animation-play-state: running
`apsp`	animation-play-state: paused

Fill Mode

클래스	CSS
`afmn`	animation-fill-mode: none
`afmf`	animation-fill-mode: forwards
`afmb`	animation-fill-mode: backwards
`afmbf`	animation-fill-mode: both

Direction

클래스	CSS
`adin`	animation-direction: normal
`adir`	animation-direction: reverse
`adial`	animation-direction: alternate
`adialr`	animation-direction: alternate-reverse

Iteration Count

클래스	CSS
`aicinf`	animation-iteration-count: infinite

팁 & 주의사항

Shorthand vs 개별 속성

anfadeIn-1s-ease로 한 번에 지정하거나, afmf aicinf 등 개별 속성을 조합할 수 있습니다.

프리셋 = 자동 @keyframes

프리셋 이름(fadeIn, slideUp 등)을 사용하면 @keyframes 규칙이 CSS에 자동 삽입됩니다. 같은 keyframe을 여러 클래스에서 사용해도 중복 없이 1개만 생성됩니다.

호버 + 애니메이션

hover-anfadeIn-500ms-ease처럼 의사 클래스와 조합할 수 있습니다. 미디어 쿼리도 동일하게 지원됩니다.

animation-direction animation-fill-mode animation-iteration-count animation-play-state transition gradient