CSS 애니메이션 생성기
키프레임 애니메이션을 시각적으로 만들고 미리보기하세요
미리보기
애니메이션 설정
키프레임
0%
100%
%
opacity
%
opacity
@keyframes myAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.animated-element {
animation: myAnimation 1s ease 0s 1 normal forwards;
}CSS 애니메이션 생성기 사용 가이드
키프레임 기반 CSS 애니메이션을 시각적으로 만들 수 있는 도구입니다. 프리셋 애니메이션을 선택하거나, 직접 키프레임을 편집하여 원하는 애니메이션을 디자인하세요.
@keyframes 이해하기
CSS @keyframes 규칙은 애니메이션의 중간 단계를 정의합니다. 0%(from)에서 100%(to)까지 원하는 지점에 스타일을 지정하여 자연스러운 움직임을 만들 수 있습니다.
타이밍 함수
ease는 느리게 시작/끝, linear는 일정 속도, ease-in은 느리게 시작, ease-out은 느리게 끝나는 효과입니다. cubic-bezier로 커스텀 곡선을 만들면 더 세밀한 제어가 가능합니다.
성능 최적화
transform과 opacity 속성은 GPU 가속이 적용되어 성능이 좋습니다. width, height, margin 등을 애니메이션하면 레이아웃 재계산이 발생하므로 가능하면 transform을 사용하세요.
FAQ
Related Tools
✏️SVG Editor
Edit & optimize SVG🎨Color Picker
HEX, RGB, HSL converter🌈CSS Gradient
Visual gradient builder🎨Tailwind Playground
Tailwind to CSS preview