LEVEL 11 QUEST

안티그래비티로 AI 결과 보여주기

CSS 안티그래비티 효과로 AI 응답을 예쁘게 떠다니게 만들어요!

🌌 안티그래비티 효과란?

🎯 3가지 CSS 핵심 개념

안티그래비티 효과는 3가지 CSS 기술의 조합입니다:

1️⃣ @keyframes — 애니메이션의 "각본"을 정의
    → "처음에는 여기, 중간에는 저기, 끝에는 다시 여기"

2️⃣ transform — 요소를 이동/회전/확대
    → translateY(-15px) = 위로 15px 이동!

3️⃣ animation — keyframes를 요소에 적용
    → "3초 동안, 부드럽게, 무한 반복!"

속성	역할	예시
`@keyframes`	애니메이션 동작 정의	`@keyframes float { 50% { transform: translateY(-15px) } }`
`animation-name`	어떤 keyframes를 쓸지	`animation-name: float`
`animation-duration`	한 주기 시간	`animation-duration: 3s`
`animation-timing-function`	속도 곡선	`ease-in-out` (부드러운 시작/끝)
`animation-iteration-count`	반복 횟수	`infinite` (무한 반복!)
`animation-delay`	시작 지연	`0.5s` (0.5초 뒤 시작)

🔒

여기까지는 미리보기입니다

안티그래비티로 AI 결과 보여주기
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

Google로 3초 만에 시작 →🧵 Threads로 시작 무료 공개 강의 둘러보기 (Lv.1~3)