LocalTools오프라인 브라우저 도구 모음

분류: 개발 도구

CSS Keyframes 생성기

자체 기획 도구찾는 도구가 없나요?

애니메이션 프리셋을 고르고 @keyframes 블록을 복사합니다

페이드, 슬라이드, 바운스, 펄스, 회전 프리셋을 고르고 지속 시간, 타이밍 함수, 반복 횟수, 방향을 설정하면, 이를 사용하는 완전한 @keyframes 블록과 animation 축약형을 실시간 미리보기와 함께 복사할 수 있습니다.

출력
@keyframes localtools-preview {
  from {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-24px);
  }

  60% {
    transform: translateY(0);
  }

  80% {
    transform: translateY(-12px);
  }

  to {
    transform: translateY(0);
  }
}

.element {
  animation: localtools-preview 1.2s ease-in-out infinite normal;
}

프리셋을 변경할 때마다 아래에 표시된 정확한 CSS로 미리보기가 다시 시작됩니다.

이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.

이 도구로 할 수 있는 일

@keyframes 블록을 손으로 작성하려면 백분율 지점에 이름을 붙이고 각 지점의 속성 값이 예상대로 보간되도록 맞춰야 하므로, 여러 지점이 있는 바운스 같은 애니메이션에서는 미묘하게 틀리기 쉽습니다. 이 도구는 흔히 쓰는 애니메이션 형태 몇 가지를 완성된 지점 목록으로 미리 준비해 두었고, keyframes 자체를 바꾸지 않는 타이밍 컨트롤만 따로 조정할 수 있게 해 주므로 미리보기가 항상 아래에 표시된 CSS 블록과 정확히 일치합니다.

사용 방법

  1. 애니메이션 프리셋을 고릅니다.
  2. 지속 시간, 타이밍 함수, 반복 횟수, 방향을 설정합니다.
  3. @keyframes 블록과 그 아래의 animation 축약형을 복사합니다.

개인정보

이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.

자주 묻는 질문

프리셋을 바꾸면 왜 미리보기가 다시 시작되나요?
프리셋을 바꾸면 바탕이 되는 @keyframes 지점이 바뀌므로, 실행 중인 애니메이션이 끝날 때까지 기다리지 않고 방금 생성된 것과 정확히 일치하도록 미리보기 요소를 다시 마운트합니다.
반복 횟수 "infinite"는 무엇을 하나요?
애니메이션을 계속 반복하며, 미리보기가 기본으로 사용하는 값입니다. 정해진 횟수만 재생하고 멈추게 하려면 대신 숫자를 지정하세요.
서버로 전송되는 것이 있나요?
없습니다. @keyframes 블록과 animation 축약형은 선택한 프리셋과 타이밍 값으로 페이지에서 만들어지며, 그래서 미리보기가 즉시 갱신됩니다.

전체 도구로 돌아가기