CSS transition

핵심 개념

transition은 CSS 속성 변화를 부드럽게 애니메이션합니다. transition:all 0.3s ease는 모든 속성을 0.3초 동안 ease 타이밍으로 전환합니다. timing-function은 linear/ease/ease-in/ease-out/cubic-bezier가 있습니다. transition을 지우고 hover 시 변화가 얼마나 거칠어지는지 확인하십시오.

코드 분석

CSS3📋 코드 (3줄)

<style>.tr-btn{display:inline-block;padding:12px 28px;background:#1a1a1a;color:#e8e8e8;border:1px solid #10b981;cursor:pointer;font-family:monospace;font-size:14px;transition:all 0.4s ease;margin:8px;}.tr-btn:hover{background:#10b981;color:#080808;transform:translateY(-3px);letter-spacing:0.1em;}</style>
<div class='tr-btn'>HOVER ME</div>
<div class='tr-btn' style='transition-timing-function:cubic-bezier(0.68,-0.55,0.265,1.55)'>SPRING</div>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 CSS 'CSS transition' 코드에서
레이아웃·우선순위·반응형 버그를 찾고
수정 코드와 원인을 단계별로 설명해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'CSS transition'를 사용한 실전 UI 컴포넌트를
3가지 만들어줘. 모바일 반응형까지 포함된 완성 코드로.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 CSS 'CSS transition' 관련 코드 전체를 분석해서
중복 속성, 미사용 셀렉터, 성능 저하 요소를
우선순위별로 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

'CSS transition'가 2026년에도 최선의 방법인지
최신 CSS(컨테이너 쿼리, :has, 서브그리드 등) 기능과 비교해서
솔직히 평가해줘.

⭐ 이것만 기억하세요

CSS transition는 이 3가지만 확실히 잡으세요

1.hover 시 색상이 즉시 바뀌면 딱딱하고 기계적인 느낌을 주는데, transition 없이는 부드러운 변화가 불가능합니다

2.transition은 속성명·지속시간·타이밍함수·딜레이 4개 값으로 CSS 속성 변화를 시간에 걸쳐 보간합니다

3.다음 챕터에서 요소를 회전·확대·이동시키는 CSS transform을 배웁니다

💬 이 챕터 질문 보기

CSS3 · CH.17 — 질문하거나 답변을 확인하세요

→

진행도 17 / 34

← 커리큘럼으로 ← 목록으로 (CSS3)