이번에는 tailwind을 이용한 트랜스폼, 애니메이션 기능에 대해서 알아보고자 한다.
트랜스폼
tailwind에서 transform이란 변환을 제어하는 클래스를 의미 한다. 크기 변환, 위치 변환, 등등 여러 움직임에 대한 변환을 제어 할 수 있다. 만약 움직임에 대한 시간을 부여하고 싶다면 duration 옵션을 통해 제어하면 된다.
-index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
transitionDuration: {
0: '0ms',
2000: '2000ms',
},
},
},
}
</script>
<title>Transform & Transition</title>
</head>
<body>
<!-- No Transition -->
<button
class="px-8 py-2 m-24 text-white bg-blue-500 rounded hover:bg-blue-700"
>
Click me
</button>
<!-- Transition -->
<button
class="px-8 py-2 m-24 text-white bg-blue-500 rounded transition-colors duration-700 hover:bg-blue-700"
>
Click me
</button>
<!-- Transition & Transform -->
<button
class="px-8 py-2 m-24 text-white bg-blue-500 rounded transition ease-in-out delay-150 duration-2000 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500"
>
Click me
</button>
<!-- Transform & Transition -->
<img
src="../assets/img/img1.jpg"
alt=""
class="hover:transform hover:rotate-180 hover:scale-75 hover:skew-x-12 transition"
/>
</body>
</html>
<!-- Transition Property
transition-none
transition-property: none;
transition-all
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition
transition-property: color, background-color, border-color,
text-decoration-color, fill, stroke, opacity, box-shadow,
transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-colors
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-opacity
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-shadow
transition-property: box-shadow;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-transform transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
-->
<!--
Duration
duration-75 transition-duration: 75ms;
duration-100 transition-duration: 100ms;
duration-150 transition-duration: 150ms;
duration-200 transition-duration: 200ms;
duration-300 transition-duration: 300ms;
duration-500 transition-duration: 500ms;
duration-700 transition-duration: 700ms;
duration-1000 transition-duration: 1000ms;
-->
<!-- Timing Function
ease-linear transition-timing-function: linear;
ease-in transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
ease-out transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
ease-in-out transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-->
<!-- Delay
delay-75 transition-delay: 75ms;
delay-100 transition-delay: 100ms;
delay-150 transition-delay: 150ms;
delay-200 transition-delay: 200ms;
delay-300 transition-delay: 300ms;
delay-500 transition-delay: 500ms;
delay-700 transition-delay: 700ms;
delay-1000 transition-delay: 1000ms;
-->
<!-- TRANSFORMS -->
<!-- Scale
scale-0 transform: scale(0);
scale-x-0 transform: scaleX(0);
scale-y-0 transform: scaleY(0);
scale-50 transform: scale(.5);
scale-x-50 transform: scaleX(.5);
scale-y-50 transform: scaleY(.5);
scale-75 transform: scale(.75);
scale-x-75 transform: scaleX(.75);
scale-y-75 transform: scaleY(.75);
scale-90 transform: scale(.9);
scale-x-90 transform: scaleX(.9);
scale-y-90 transform: scaleY(.9);
scale-95 transform: scale(.95);
scale-x-95 transform: scaleX(.95);
scale-y-95 transform: scaleY(.95);
scale-100 transform: scale(1);
scale-x-100 transform: scaleX(1);
scale-y-100 transform: scaleY(1);
scale-105 transform: scale(1.05);
scale-x-105 transform: scaleX(1.05);
scale-y-105 transform: scaleY(1.05);
scale-110 transform: scale(1.1);
scale-x-110 transform: scaleX(1.1);
scale-y-110 transform: scaleY(1.1);
scale-125 transform: scale(1.25);
scale-x-125 transform: scaleX(1.25);
scale-y-125 transform: scaleY(1.25);
scale-150 transform: scale(1.5);
scale-x-150 transform: scaleX(1.5);
scale-y-150 transform: scaleY(1.5);
-->
<!-- Rotate
rotate-0 transform: rotate(0deg);
rotate-1 transform: rotate(1deg);
rotate-2 transform: rotate(2deg);
rotate-3 transform: rotate(3deg);
rotate-6 transform: rotate(6deg);
rotate-12 transform: rotate(12deg);
rotate-45 transform: rotate(45deg);
rotate-90 transform: rotate(90deg);
rotate-180 transform: rotate(180deg);
-->
<!-- Translate
translate-x-0 transform: translateX(0px);
translate-y-0 transform: translateY(0px);
translate-x-px transform: translateX(1px);
translate-y-px transform: translateY(1px);
translate-x-0.5 transform: translateX(0.125rem);
translate-y-0.5 transform: translateY(0.125rem);
translate-x-1 transform: translateX(0.25rem);
translate-y-1 transform: translateY(0.25rem);
translate-x-1.5 transform: translateX(0.375rem);
translate-y-1.5 transform: translateY(0.375rem);
translate-x-2 transform: translateX(0.5rem);
translate-y-2 transform: translateY(0.5rem);
translate-x-2.5 transform: translateX(0.625rem);
translate-y-2.5 transform: translateY(0.625rem);
translate-x-3 transform: translateX(0.75rem);
translate-y-3 transform: translateY(0.75rem);
translate-x-3.5 transform: translateX(0.875rem);
translate-y-3.5 transform: translateY(0.875rem);
translate-x-4 transform: translateX(1rem);
translate-y-4 transform: translateY(1rem);
translate-x-5 transform: translateX(1.25rem);
translate-y-5 transform: translateY(1.25rem);
translate-x-6 transform: translateX(1.5rem);
translate-y-6 transform: translateY(1.5rem);
translate-x-7 transform: translateX(1.75rem);
translate-y-7 transform: translateY(1.75rem);
translate-x-8 transform: translateX(2rem);
translate-y-8 transform: translateY(2rem);
translate-x-9 transform: translateX(2.25rem);
translate-y-9 transform: translateY(2.25rem);
translate-x-10 transform: translateX(2.5rem);
translate-y-10 transform: translateY(2.5rem);
translate-x-11 transform: translateX(2.75rem);
translate-y-11 transform: translateY(2.75rem);
translate-x-12 transform: translateX(3rem);
translate-y-12 transform: translateY(3rem);
translate-x-14 transform: translateX(3.5rem);
translate-y-14 transform: translateY(3.5rem);
translate-x-16 transform: translateX(4rem);
translate-y-16 transform: translateY(4rem);
translate-x-20 transform: translateX(5rem);
translate-y-20 transform: translateY(5rem);
translate-x-24 transform: translateX(6rem);
translate-y-24 transform: translateY(6rem);
translate-x-28 transform: translateX(7rem);
translate-y-28 transform: translateY(7rem);
translate-x-32 transform: translateX(8rem);
translate-y-32 transform: translateY(8rem);
translate-x-36 transform: translateX(9rem);
translate-y-36 transform: translateY(9rem);
translate-x-40 transform: translateX(10rem);
translate-y-40 transform: translateY(10rem);
translate-x-44 transform: translateX(11rem);
translate-y-44 transform: translateY(11rem);
translate-x-48 transform: translateX(12rem);
translate-y-48 transform: translateY(12rem);
translate-x-52 transform: translateX(13rem);
translate-y-52 transform: translateY(13rem);
translate-x-56 transform: translateX(14rem);
translate-y-56 transform: translateY(14rem);
translate-x-60 transform: translateX(15rem);
translate-y-60 transform: translateY(15rem);
translate-x-64 transform: translateX(16rem);
translate-y-64 transform: translateY(16rem);
translate-x-72 transform: translateX(18rem);
translate-y-72 transform: translateY(18rem);
translate-x-80 transform: translateX(20rem);
translate-y-80 transform: translateY(20rem);
translate-x-96 transform: translateX(24rem);
translate-y-96 transform: translateY(24rem);
translate-x-1/2 transform: translateX(50%);
translate-x-1/3 transform: translateX(33.333333%);
translate-x-2/3 transform: translateX(66.666667%);
translate-x-1/4 transform: translateX(25%);
translate-x-2/4 transform: translateX(50%);
translate-x-3/4 transform: translateX(75%);
translate-x-full transform: translateX(100%);
translate-y-1/2 transform: translateY(50%);
translate-y-1/3 transform: translateY(33.333333%);
translate-y-2/3 transform: translateY(66.666667%);
translate-y-1/4 transform: translateY(25%);
translate-y-2/4 transform: translateY(50%);
translate-y-3/4 transform: translateY(75%);
translate-y-full transform: translateY(100%);
-->
<!-- Skew
skew-x-0 transform: skewX(0deg);
skew-y-0 transform: skewY(0deg);
skew-x-1 transform: skewX(1deg);
skew-y-1 transform: skewY(1deg);
skew-x-2 transform: skewX(2deg);
skew-y-2 transform: skewY(2deg);
skew-x-3 transform: skewX(3deg);
skew-y-3 transform: skewY(3deg);
skew-x-6 transform: skewX(6deg);
skew-y-6 transform: skewY(6deg);
skew-x-12 transform: skewX(12deg);
skew-y-12 transform: skewY(12deg);
-->
<!-- Transform Origin
origin-center transform-origin: center;
origin-top transform-origin: top;
origin-top-right transform-origin: top right;
origin-right transform-origin: right;
origin-bottom-right transform-origin: bottom right;
origin-bottom transform-origin: bottom;
origin-bottom-left transform-origin: bottom left;
origin-left transform-origin: left;
origin-top-left transform-origin: top left;
-->
애니메이션
요소에 애니메이션적 요소를 추가하기 위한 클래스이다. 주로 아래 3가지가 자주 사용된다.
- animate-spin : 회전
- animate-ping : 핑
- animate-bounce : 바운스
- animate-pulse : 펄스
애니메이션을 추가하거나, 원래 있던 속성을 변경하려고 한다면, 다음과 같이 module.exports 혹은 tailwind.config 에서 수정해서 처리 할 수 있다.
- tailwind.config.js
module.exports = {
// ...
theme: {
extend: {
animation: {
'spin-slow': 'spin 3s linear infinite',
}
}
}
}
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
animation: {
'spin-slow': 'spin 3s linear infinite',
wiggle: 'wiggle 1s ease-in-out infinite',
},
keyframes: {
wiggle: {
'0%, 100%': { transform: 'rotate(-12deg)' },
'50%': { transform: 'rotate(12deg)' },
},
},
},
},
}
</script>
<title>Animation</title>
</head>
<body>
<div class="flex items-center justify-center min-h-screen bg-slate-900">
<svg
class="animate-wiggle w-48 text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
></circle>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
</div>
</body>
</html>
<!-- Animate
animate-none animation: none;
animate-spin animation: spin 1s linear infinite;
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
animate-ping animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
@keyframes ping {
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
animate-pulse animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: .5;
}
}
animate-bounce animation: bounce 1s infinite;
@keyframes bounce {
0%, 100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
-->'FrameWork > Tailwind' 카테고리의 다른 글
| Tailwind로 Html 작성할 때 사용했던 단축키나 팁들 (0) | 2023.11.07 |
|---|---|
| 플렉스, 그리드 조절하기 (0) | 2023.11.05 |
| 테두리, 필터, 상호작용 조절하기 (0) | 2023.11.05 |
| 공간 사이즈, 레이아웃, 그림자와 그라데이션 조절하기 (0) | 2023.11.05 |
| 색 , 컨테이너와 공간, 타이포그래피 조절하기 (0) | 2023.11.05 |