트랜지션 & 애니메이션
animation
CSS 애니메이션을 사용하여 엘리먼트를 애니메이션화하는 유틸리티입니다.
| Class | Styles |
|---|---|
animate-spin | animation: var(--animate-spin); /* spin 1s linear infinite */
@keyframes spin {
to {
transform: rotate(360deg);
}
} |
animate-ping | animation: var(--animate-ping); /* ping 1s cubic-bezier(0, 0, 0.2, 1) infinite */
@keyframes ping {
75%, 100% {
transform: scale(2);
opacity: 0;
}
} |
animate-pulse | animation: var(--animate-pulse); /* pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite */
@keyframes pulse {
50% {
opacity: 0.5;
}
} |
animate-bounce | animation: var(--animate-bounce); /* bounce 1s infinite */
@keyframes bounce {
0%, 100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: none;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
} |
animate-none | animation: none; |
animate-(<custom-property>) | animation: var(<custom-property>); |
animate-[<value>] | animation: <value>; |
예제
회전 애니메이션 추가하기
로딩 표시기와 같은 엘리먼트에 선형 회전 애니메이션을 추가하려면 animate-spin 유틸리티를 사용하세요:
<button type="button" class="bg-indigo-500 ..." disabled> <svg class="mr-3 size-5 animate-spin ..." viewBox="0 0 24 24"> <!-- ... --> </svg> 처리 중…</button>핑 애니메이션 추가하기
animate-ping 유틸리티를 사용해 요소가 레이더 핑이나 물결처럼 스케일과 페이드 효과를 주는 애니메이션을 적용할 수 있습니다. 이는 알림 배지와 같은 요소에 유용합니다.
<span class="relative flex size-3"> <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75"></span> <span class="relative inline-flex size-3 rounded-full bg-sky-500"></span></span>펄스 애니메이션 추가하기
animate-pulse 유틸리티를 사용해 엘리먼트가 부드럽게 나타났다 사라지는 효과를 줄 수 있습니다. 이는 스켈레톤 로더와 같은 요소에 유용합니다:
<div class="mx-auto w-full max-w-sm rounded-md border border-blue-300 p-4"> <div class="flex animate-pulse space-x-4"> <div class="size-10 rounded-full bg-gray-200"></div> <div class="flex-1 space-y-6 py-1"> <div class="h-2 rounded bg-gray-200"></div> <div class="space-y-3"> <div class="grid grid-cols-3 gap-4"> <div class="col-span-2 h-2 rounded bg-gray-200"></div> <div class="col-span-1 h-2 rounded bg-gray-200"></div> </div> <div class="h-2 rounded bg-gray-200"></div> </div> </div> </div></div>바운스 애니메이션 추가하기
animate-bounce 유틸리티를 사용해 엘리먼트가 위아래로 바운스하는 효과를 줄 수 있습니다. 이는 "아래로 스크롤" 표시기와 같은 요소에 유용합니다.
<svg class="size-6 animate-bounce ..."> <!-- ... --></svg>모션 감소 지원
사용자가 모션 감소를 선호한다고 설정한 경우, motion-safe와 motion-reduce 변형을 사용하여 애니메이션과 트랜지션을 조건부로 적용할 수 있습니다.
<button type="button" class="bg-indigo-600 ..." disabled> <svg class="mr-3 size-5 motion-safe:animate-spin ..." viewBox="0 0 24 24"> <!-- ... --> </svg> 처리 중</button>커스텀 값 사용하기
animate-[<value>] 구문을 사용하세요 animation를 완전히 커스텀한 값으로 설정하려면:
<div class="animate-[wiggle_1s_ease-in-out_infinite] ..."> <!-- ... --></div>CSS 변수를 사용하려면 animate-(<custom-property>) 구문을 사용할 수도 있습니다:
<div class="animate-(--my-animation) ..."> <!-- ... --></div>이는 animate-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.
반응형 디자인
접두사 an animation 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="animate-none md:animate-spin ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
테마 커스터마이징
--animate-* 테마 변수를 사용해 프로젝트에서 animation 유틸리티를 커스터마이징할 수 있습니다:
@theme { --animate-wiggle: wiggle 1s ease-in-out infinite; @keyframes wiggle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }}이제 animate-wiggle 유틸리티를 마크업에서 사용할 수 있습니다:
<div class="animate-wiggle"> <!-- ... --></div>테마 커스터마이징에 대해 더 알아보려면 테마 문서를 참고하세요.
