최근 사용

    도구를 열면 여기에 표시됩니다.

    CSS 애니메이션 생성기

    시각적 타임라인 편집기로 CSS 키프레임 애니메이션을 만듭니다

    이 도구 공유

    문제 신고

    개인 입력 내용이나 파일은 포함하지 말고 문제를 설명해 주세요.

    이 도구는 얼마나 유용했나요?

    이 도구는 얼마나 유용했나요?

    애니메이션 설정

    애니메이션 프리셋

    키프레임

    0% → 100%

    키프레임 · 0%

    키프레임 · 100%

    실시간 미리보기

    미리보기

    생성된 CSS

    @keyframes myAnimation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.animated-element {
  animation-name: myAnimation;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-delay: 0s;
}

    키프레임을 수정하고 다시 재생해 애니메이션을 확인하세요.

    빠른 변형 예시translateX(100px) / translateY(-50px)rotate(45deg) / rotate(360deg)scale(1.5) / scale(0.5)기울이기 예시: skewX(10deg) / skewY(-5deg) 형식원근 회전 예시: perspective(400px) rotateY(180deg) 형식

    CSS 애니메이션 생성기 소개

    무료 CSS 애니메이션 생성기로 복잡한 코드를 처음부터 쓰지 않고도 전문적인 키프레임 애니메이션을 시각적으로 만들 수 있습니다. 지속 시간과 타이밍 함수부터 키프레임별 속성까지 애니메이션의 모든 요소를 설정하고, 실시간으로 갱신되는 실시간 미리보기로 결과를 바로 확인하세요.

    은은한 페이드 인 효과, 눈길을 끄는 바운스, 사용자 지정 다단계 애니메이션 등 무엇이 필요하든 이 도구는 기본 프리셋 10개와 전체 키프레임 편집기를 제공합니다. 모든 프리셋은 자유롭게 수정할 수 있어 출발점으로 삼고, 원하는 퍼센트 지점에서 transform, opacity, 배경색을 포함한 모든 속성을 세밀하게 조정할 수 있습니다.

    생성기는 올바른 @keyframes 구문과 개별 animation 속성을 갖춘 깔끔한 실무용 CSS 코드를 출력합니다. 생성된 코드를 복사해 스타일시트에 붙여넣기만 하면 됩니다. 모든 처리는 브라우저에서 이루어지며 서버로 업로드되지 않아 작업 내용이 비공개로 안전하게 유지됩니다.

    디자인

    새로 추가됨

    모든 도구

    개인정보 설정

    분석, 광고, 맞춤 설정에 대한 환경설정을 선택하세요. 필수 저장소는 테마와 저장한 도구 같은 기능이 계속 작동하도록 합니다.

    필수 저장소는 항상 사용됩니다.