Tailwind :: hover 애니메이션 : 위로 살짝 올라가기
<div className="bg-white p-6 rounded-lg shadow-md duration-400 ease-in-out transition-transform transform hover:-translate-y-2 border border-gray-300">
</div>
- trnasition-tranform : 호버와 같은 변환 속성에 대해 트랜지션을 적용
- duration-400 : 지속 시간을 400ms(0.4s)로 설정
- hover:-translate-y-2 : 호버 시 요소를 0.5ream (8px) 만큼 위로 이동시킴. translate 앞에 - 붙어 있으면 위로, 양수면 아래로.
'Programing > CSS' 카테고리의 다른 글
CSS의 구성 요소 (Selectors, Property, value)와 우선순위 총 정리 (1) | 2025.03.10 |
---|---|
CSS란? (0) | 2025.03.04 |
Tailwind :: 마우스 호버 시 살짝 커지는 애니메이션 (0) | 2024.06.30 |
React Tailwind :: 모바일 고려 Layout 컴포넌트 (0) | 2024.06.29 |
호버 시 자연스럽게 커지는 애니메이션 (0) | 2024.06.26 |
댓글