CSS 애니메이션 생성기

CSS 애니메이션 만들기, 코드 없이 시각적으로! fade, slide, bounce 등 프리셋 선택하고 속도/이징 조절하면 바로 쓸 수 있는 @keyframes 코드가 생성돼요.

애니메이션 프리셋

지속 시간0.5s

딜레이0s

이징 (타이밍)

반복 횟수

재생 방향

종료 상태

생성된 CSS

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 0.5s ease 0s 1 normal forwards;
}

미리보기

✨

꿀팁: 애니메이션 끝나고 마지막 상태 유지하려면 fill-mode를 'forwards'로! CSS 트랜지션이랑 같이 쓰면 더 풍부한 모션 효과를 낼 수 있어요.

CSS 애니메이션 생성기 & 키프레임 메이커

웹 애니메이션 효과를 코드 없이 만들어보세요. fadeIn, fadeOut, slideIn, bounce, pulse, spin, shake, flip 등 14가지 이상의 프리셋 중에서 골라서 바로 적용할 수 있어요. 지속 시간, 이징(가속도), 딜레이, 반복 횟수까지 세밀하게 조절하고, 실시간 미리보기로 확인한 다음 깔끔한 @keyframes CSS를 복사하세요.

1이 도구는 언제 쓰나요?

💡웹페이지 요소에 등장/퇴장 애니메이션 넣기

💡버튼, CTA에 주목 효과 주기

💡CSS 로딩 스피너/로더 만들기

💡코딩 전 마이크로인터랙션 프로토타이핑

💡카드, 이미지에 호버 애니메이션 적용

2주요 기능

14가지 이상 애니메이션 프리셋 (fade, slide, bounce, spin 등)
실시간 라이브 미리보기—변경사항 즉시 확인
지속 시간, 딜레이, 이징, 반복 횟수, 방향 완전 커스텀
@keyframes + animation 단축 속성 깔끔하게 출력
원클릭 복사 & .css 파일 다운로드
오프라인 동작—100% 클라이언트 처리, 데이터 업로드 없음

3사용 방법

프리셋 라이브러리에서 원하는 애니메이션 효과를 선택하세요.
지속 시간(속도), 딜레이, 이징 곡선을 조절하세요.
실시간 미리보기에서 바로 변화를 확인하세요.
CSS 코드를 복사하거나 .css 파일로 다운로드하세요.

자주 묻는 질문

Q. @keyframes 코드 직접 수정할 수 있나요?

A. 당연하죠! 생성된 CSS는 그냥 복사해서 원하는 대로 수정하면 돼요. 키프레임 비율이나 속성값 바꾸는 건 자유예요.

Q. React, Vue, Tailwind에서도 쓸 수 있어요?

A. 네! 표준 CSS라서 어떤 프레임워크든 상관없어요. CSS 파일에 붙여넣거나 styled-components 같은 CSS-in-JS에서도 바로 사용 가능해요.

Q. 애니메이션이랑 트랜지션 차이가 뭐예요?

A. 애니메이션은 @keyframes로 여러 단계의 복잡한 모션을 정의해요. 트랜지션은 한 상태에서 다른 상태로의 단순 변화고요. 이 도구는 키프레임 애니메이션 생성에 집중해요.

🚀 Pockit 크롬 확장프로그램 공식 출시Chrome

100% 프라이버시 보장