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

CSS @keyframes 규칙은 실제로 작은 타임라인입니다. 백분율 체크포인트 세트로, 각 체크포인트는 정확한 순간에 속성이 어떻게 보여야 하는지 선언하고 브라우저는 그 사이의 모든 것을 보간합니다. 손으로 하나씩 구축한다는 것은 여러 속성에 걸쳐 머리 속에 이러한 백분율 체크포인트 중 여러 개를 동시에 유지하는 것을 의미합니다. 이 생성기는 해당 타임라인을 실제로 보고 드래그할 수 있는 것으로 바꿉니다. 즉, 속성당 하나의 수평 차선이 있고 모든 체크포인트에 중지 마커가 있습니다.

중심은 스크럽 플레이헤드입니다. 0%에서 100% 사이의 어느 지점으로 드래그하면 미리 보기 상자가 그 순간에 정확한 결합 상태로 이동합니다. 이는 가장 가까운 키프레임이 아니라 모든 활성 트랙의 재생 헤드를 둘러싸는 두 정지점 사이에서 계산된 실제 선형 보간 값입니다. 위치, 회전, 크기 조정과 같은 숫자 속성은 일반 숫자로 보간됩니다. background-color는 각각의 빨간색, 녹색 및 파란색 채널을 독립적으로 보간하므로 실제로 설정한 색상 사이를 이동하는 대신 색상 트랙이 중간 색상을 통해 부드럽게 페이드됩니다.

여러 트랙이 자동으로 하나의 일관된 애니메이션으로 결합됩니다. 모든 변환 기반 속성(이동, 회전, 크기 조정)은 각 키프레임 비율에서 단일 변환 선언으로 병합되며, 불투명도와 배경색은 실제 손으로 작성한 CSS와 똑같이 자체 라인에 유지됩니다. 특정 트랙에 명시적인 정지 지점이 없는 비율은 의도적으로 해당 속성 선언에서 제외됩니다. 브라우저의 자체 키프레임 보간법은 사용자가 직접 입력한 @keyframes 규칙과 마찬가지로 존재하는 정지 지점 사이의 간격을 채웁니다.

바운스, 셰이크, 펄스, 페이드, 슬라이드인 등 5가지 사전 설정을 통해 클릭 한 번으로 바로 조정할 수 있는 완전한 타임라인(적절한 지속 시간, 타이밍 기능 및 반복 횟수 포함)을 로드할 수 있습니다. 언제든지 재생을 누르면 동적으로 삽입된 스타일시트를 통해 즉석에서 생성된 미리보기 요소에서 실제 CSS 애니메이션이 실행되는 것을 볼 수 있습니다. 그런 다음 전체 @keyframes 블록과 .animated-element { animation: ... } 약식을 자신의 프로젝트에 바로 복사합니다. 이 사이트의 모든 도구와 마찬가지로 모든 도구는 업로드된 항목 없이 브라우저에서 로컬로 실행됩니다.