Tailwind - 트랜지션, 애니메이션
#Web/CSS
Tailwind에서는 간단한 유틸리티 클래스를 통해 Transition 효과를 적용할 수 있다.
기본 사용법
<button class="text-5xl bg-blue-500 hover:bg-blue-900 text-white font-bold py-2 px-4 rounded transition duration-500" >
transition클래스는 색상, 배경, 보더 등 여러 속성에 전환 효과 적용.duration-500은 전환 시간을 500ms로 설정합니다.hover:bg-blue-900은 마우스를 올렸을 때 배경색을 blue-900로 변경합니다.
전환 속성 지정 (transition-property)
transition-all, transition-colors, transition-opacity 등의 클래스를 사용하여 특정 속성만 전환되도록 할 수 있습니다.
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition-colors duration-500">
Hover me
</button>
transition-colors는 색상 변경에만 전환 효과를 적용합니다.duration-500은 전환 효과가 500ms 동안 지속됩니다.
transition-property에 관한 클래스 명은 공식 문서에서 자세히 확인할 수 있습니다.
Transition Timing Function (전환 속도 조정)
Transition Delay (전환 지연)
내장 애니메이션 유틸리티 클래스
예시)
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Animation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
<script src='https://cdn.tailwindcss.com'></script>
</head>
<body>
<main class="container min-h-screen flex flex-col items-center justify-center gap-y-4 p-10">
<button type="button" class="bg-indigo-500 text-white text-3xl p-5 flex items-center gap-x-3 rounded" disabled>
<i class="fa-solid fa-spinner animate-spin"></i>
Processing...
</button>
<span class="h-12 w-12 bg-sky-500 rounded-full animate-ping"></span>
<div class="bg-gray-300 rounded-lg h-10 w-full animate-pulse"></div>
<span class="h-12 w-12 bg-sky-500 rounded-full animate-bounce"></span>
</main>
</body>
</html>
'FE > CSS' 카테고리의 다른 글
| Tailwind - 다크모드 (0) | 2025.02.13 |
|---|---|
| Tailwind - 반응형 디자인 (0) | 2025.02.13 |
| Tailwind - Layout(Container, Flexbox, Grid, Position) (0) | 2025.02.13 |
| Tailwind - Core(Utility-First CSS, State) (0) | 2025.02.13 |
| Tailwind - 간격 조절, Sizing (0) | 2025.02.13 |