애니메이션
Animation (Keyframes)
정해 둔 움직임을 처음부터 끝까지 재생하는 것. 반복하거나 자동으로 움직일 수 있어요.
💡 트랜지션이 '문 여닫기'라면 애니메이션은 '짧은 만화 영화'예요.
🤖 AI에게 이렇게 말해 보세요
히어로의 아래 화살표 아이콘에 위아래로 통통 튀는 애니메이션(Animation)을 넣어 줘. 1.5초마다 무한 반복하고, '움직임 줄이기' 설정을 켠 사람에게는 멈춰 있게 해 줘.
핵심은 ‘Animation (Keyframes)’라는 단어예요. 이 단어를 넣으면 AI가 훨씬 정확하게 알아들어요.
📌 알아 두면 좋아요
움직임의 중간 장면들을 '키프레임(Keyframe)'이라고 해요. 복잡한 애니메이션은 'Framer Motion', 'GSAP' 같은 라이브러리를 쓰라고 하면 좋아요. 이 사이트의 움직이는 그림도 모두 키프레임으로 만들었어요.
이럴 때 써요
- 로고가 통통 튀거나, 아이콘이 계속 빙글 도는 것처럼 저절로 움직여야 할 때
이렇게도 불러요: 움직임, 키프레임, keyframe, 모션, motion, framer motion, gsap, lottie, 로티