CSS 키프레임 애니메이션 생성기
CSS 키프레임 애니메이션 생성기는 미리 준비된 12가지 스타일(페이드 인/아웃, 4방향 슬라이드 인, 줌 인/아웃, 바운스 인, 회전 인, X축·Y축 플립) 중에서 애니메이션 유형을 고른 다음, 지속 시간, 지연, 타이밍 함수, 반복 횟수를 조정할 수 있으며, 실시간 미리보기와 다시 재생 버튼도 제공합니다. 완성된 @keyframes 규칙 전체와 바로 사용 가능한 애니메이션 클래스를 함께 복사하세요. 모든 생성은 브라우저 안에서 이루어지며, 어디로도 업로드되지 않습니다.
디자인·CSS 도구 브라우저에서 완전히 실행
코드는 모두 브라우저 안에서 생성됩니다 — 서버로 전송되는 데이터는 전혀 없습니다.
CSS 코드
@keyframes uddatakAnim {
0% { opacity: 0; }
100% { opacity: 1; }
}
.animated-box {
animation: uddatakAnim 800ms ease-out 0ms 1;
}자주 묻는 질문
네, @keyframes와 animation 속성은 특별한 벤더 프리픽스 없이 모든 최신 브라우저에서 지원됩니다.