a11y.skipToMainContent
1

CSS Keyframes 애니메이션 생성기

미리 설정 애니메이션을 선택하고 타이밍을 조정하고 라이브를 시청하고 @keyframes 블록과 애니메이션을 복사합니다.

Animation

s
s

Preview

PLAY

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use Keyframes Animation Generator

  1. Fade-in, bounce 또는 spin과 같은 미리 설정 애니메이션을 클릭합니다.
  2. 기간, 타이밍 기능, 지연, 반복 조사, 방향 및 충분한 형태를 놓으십시오.
  3. 미리보기 실행 및 프레스 재생을 다시 트리거합니다.
  4. @keyframes 블록과 애니메이션 단축을 잡아 복사 CSS를 클릭합니다.

키프레임 애니메이션 생성기은 무엇입니까?

Keyframes Animation Generator는 준비된 CSS @keyframes 애니메이션을 만듭니다. 프리셋을 선택하세요 - 페이드 인, 슬라이드 인, 바운드, 펄스, 쉐이크, 스핀, 플립 또는 줌 인 - 그리고 각 하나는 자체 키 프레임 블록을 발송합니다.

기간, 타이밍 기능 (배출을위한 몇 입방 방위 사전 세트 포함), 지연, 반복 카운트, 방향 및 채우 모드. 미리보기 요소는 즉시 애니메이션을 실행하고 모든 변경에 자동 재생; 재생 버튼은 강제적인 리플로우를 사용하여 수요에 의존합니다.

이 도구는 브라우저에서 완전히 실행하고 전체 @keyframes 정의와 일치 animation 간략하게 출력하므로 스타일 시트로 전체 작업 애니메이션을 붙여 넣을 수 있습니다.

Advertisement

FAQ

@keyframes와 애니메이션 속성의 차이점은 무엇입니까?
@keyframes는 애니메이션 (from/to 또는 백분율 단계) 동안 어떤 변경 사항을 정의합니다. 애니메이션 단축은 기간, 상승, 지연, 카운트 및 방향을 사용하여 키 프레임을 사용하는 요소에 대해 설명합니다. 작업 애니메이션을 모두 필요로 합니다.
애니메이션은 한 번만 플레이하거나 영원히 반복합니까?
한 번의 실행을 위해 1 개와 같은 반복 카운트를 설정하거나 영원히 반복하기 위해 'infinite'을 틱. 이 맵은 생성된 단축키의 애니메이션-iteration-count 값입니다.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 Keyframes Animation Generator on Wikipedia·Developer Tools on Wikipedia·Keyframes Animation Generator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement