@keyframes animation

핵심 개념

@keyframes는 애니메이션의 시작부터 끝까지 단계별 상태를 정의합니다. 0%는 시작, 50%는 중간, 100%는 끝 상태입니다. animation 속성으로 이름/지속시간/타이밍/반복횟수를 지정합니다. animation:name 1.5s ease-in-out infinite는 무한 반복입니다. animation 속성을 지우며 정지 상태로 돌아가는 것을 확인하십시오.

코드 분석

CSS3📋 코드 (2줄)

<style>@keyframes terminate{0%{transform:scale(1);opacity:1;background:#10b981;}50%{transform:scale(1.08);opacity:0.7;background:#ff4444;}100%{transform:scale(1);opacity:1;background:#10b981;}}.anim{width:100px;height:100px;background:#10b981;animation:terminate 1.5s ease-in-out infinite;display:flex;align-items:center;justify-content:center;color:white;font-family:monospace;font-size:11px;font-weight:bold;text-align:center;}</style>
<div class='anim'>PULSE<br>LOOP</div>

AI 프롬프트

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

Claude

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

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

ChatGPT

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

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

Gemini

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

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

Grok

무료: Grok 4.1 / SuperGrok $30/mo

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

⭐ 이것만 기억하세요

@keyframes animation는 이 3가지만 확실히 잡으세요

1.transition은 시작과 끝 두 상태만 가능하기 때문에 3단계 이상의 연속 동작을 표현할 수 없습니다

2.@keyframes는 0%~100% 사이 원하는 지점마다 스타일을 지정하고, animation 속성으로 재생을 제어합니다

3.다음 챕터에서 겹치는 요소의 앞뒤 순서를 결정하는 z-index를 배웁니다

💬 이 챕터 질문 보기

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

→

진행도 19 / 34

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