애니메이션

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

Animation Shorthand

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

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

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">부분	역할	예시
`an`	animation prefix (required)	an
`{name}`	keyframe name (required)	fadeIn, slideUp, pulse
`{duration}`	duration (required)	1s, 500ms, 1-5s
`{timing}`	timing function (optional)	ease, linear, ease-in-out
`{iteration}`	iteration count (optional)	infinite, 3
`{fillMode}`	fill-mode (optional)	forwards, backwards, both

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

사용 예시

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	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는 직접 작성해야 합니다.

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">이름	효과	사용 예시
`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`

코드 예시

<!-- Fade in -->
<div class="anfadeIn-1s-ease">Appearing element</div>

<!-- Infinite rotation loading -->
<div class="anspinCW-2s-linear-infinite w4rem h4rem">
  <svg>...</svg>
</div>

<!-- Bounce notification badge -->
<span class="anbounce-1s-ease bg6366F1 cFFFFFF br50p w2-4rem h2-4rem df jcc aic">3</span>

<!-- Shake on hover -->
<button class="hover-anshake-500ms-ease bg18181B cFFFFFF py12px px2-4rem br8px">
  Hover me
</button>

<!-- Card entrance (slide up + fill forwards) -->
<div class="anslideUp-500ms-ease-in-out-infinite-forwards bg0F0F17 p2rem br8px">
  Card Content
</div>

커스텀 Keyframe 사용

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

Play State

<tr><th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS
`apsr`	animation-play-state: running
`apsp`	animation-play-state: paused

Fill Mode

<tr><th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS
`afmn`	animation-fill-mode: none
`afmf`	animation-fill-mode: forwards
`afmb`	animation-fill-mode: backwards
`afmbf`	animation-fill-mode: both

Direction

<tr><th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS
`adin`	animation-direction: normal
`adir`	animation-direction: reverse
`adial`	animation-direction: alternate
`adialr`	animation-direction: alternate-reverse

Iteration Count

<tr><th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	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