CSS 키프레임 애니메이션을 쉽게 만들고 미리보기할 수 있는 도구입니다.
@keyframes myAnimation {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animated-element {
animation: myAnimation 1s ease 1 normal none;
}
1. 프리셋을 선택하거나 직접 키프레임을 편집하세요. 2. 애니메이션 속성(지속 시간, 타이밍 함수 등)을 조정하세요. 3. 미리보기로 애니메이션을 확인하세요. 4. 생성된 CSS 코드를 복사하여 사용하세요.
A. 타이밍 함수는 애니메이션의 속도 곡선을 결정합니다. ease는 부드러운 시작과 끝, linear는 일정한 속도, ease-in은 천천히 시작, ease-out은 천천히 끝냅니다.
A. 반복 횟수 선택 메뉴에서 'infinite'를 선택하세요.
A. '키프레임 추가' 버튼을 클릭하고 위치(%)와 속성을 입력하세요. 0%와 100%는 시작과 끝을 의미합니다.
A. fillMode는 애니메이션 전후의 스타일을 결정합니다. forwards는 마지막 키프레임 상태를 유지하고, backwards는 첫 키프레임을 미리 적용합니다.
CSS 애니메이션은 @keyframes 규칙으로 정의한 키프레임과 animation 속성을 조합해 요소에 움직임을 부여합니다. @keyframes 내에서 0%(from)과 100%(to) 사이의 중간 단계를 자유롭게 지정할 수 있어, 단순한 페이드인부터 복잡한 움직임까지 표현할 수 있습니다. animation-duration으로 재생 시간, animation-timing-function으로 속도 곡선, animation-iteration-count로 반복 횟수를 제어합니다.
타이밍 함수(timing function)는 애니메이션이 시간에 따라 어떤 속도로 진행되는지를 결정합니다. ease는 부드럽게 시작해 중간에 빨라지고 끝에 느려지는 기본값이며, linear는 일정한 속도를 유지합니다. ease-in은 천천히 시작해 점점 빨라지고, ease-out은 빠르게 시작해 천천히 끝납니다. cubic-bezier()를 사용하면 네 개의 제어점으로 완전히 커스텀한 속도 곡선을 만들 수 있어 스프링 효과나 바운스 감을 세밀하게 조절할 수 있습니다.
브라우저는 transform과 opacity 속성 변경을 GPU에서 처리하기 때문에 이 두 속성 중심으로 애니메이션을 구성하면 성능이 크게 향상됩니다. width, height, margin 같은 레이아웃 속성의 변경은 리플로우(reflow)를 유발해 성능 저하를 일으킬 수 있으므로 피하는 것이 좋습니다. will-change: transform 선언으로 브라우저에 미리 힌트를 주면 렌더링 최적화에 도움이 되지만, 남용하면 메모리를 과도하게 사용할 수 있으니 주의가 필요합니다.