Design Tools
CSS Animation Generator — Build @keyframes Animations Free
🔒 브라우저에서 실행
Build CSS @keyframes animations without hand-coding. Set the animation name, duration, timing function, delay, iteration count, direction, and fill mode using form controls — the generated CSS class and keyframes block update live. Hit Play to preview the animation on a demo element. No upload, no account — runs in your browser.
사용 방법
- 애니메이션 이름, 지속 시간, 타이밍 함수 및 기타 속성을 설정하세요.
- 재생 버튼을 클릭하여 데모 요소에서 애니메이션을 미리 보세요.
- 생성된 CSS 클래스와 @keyframes 블록을 복사하세요.
.fade-in {
animation-name: fade-in;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
}
@keyframes fade-in {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}The keyframe template shows a fade-in-up effect. Edit the @keyframes block to customise the animation. Everything runs in your browser.