CSS 애니메이션 생성기

CSS 애니메이션 생성기는 CSS 키프레임 애니메이션의 시각적 편집기입니다. 페이드 인,슬라이드, 줌,바운스, 스핀 또는 펄스와 같은 모션 사전 설정을 선택하고 지속 시간,타이밍 기능,지연, 반복 횟수,방향 및 채우기 모드를 조정하고 라이브 미리보기에서 실행되는 것을 본 다음 두 가지를 복사합니다: 모션을 정의하는 @keyframes 규칙과 이를 재생하는 애니메이션 약칭. 대부분의 사람들이 메모리 또는 프레임워크에서 복사한 CSS 블록을 스타일시트에 도달하기 전에 모양을 만들고 볼 수 있는 것으로 바꿉니다.

CSS 애니메이션은 반드시 동의해야 하는 두 개의 반쪽을 가지고 있습니다. @keyframes 규칙은 일련의 단계를 명명하며,각각은 요소가 그 시점에서 보유해야 하는 속성 값과 백분율 오프셋으로 작성됩니다. 예를 들어 불투명도 0 에서 0%, 불투명도 1 에서 100%입니다. 그런 다음 애니메이션 속성은 해당 키프레임 이름을 참조하고 재생 방법을 제어합니다: 지속 시간,편안함, 시작 전 대기 시간,반복 횟수,각 패스가 실행되는 방향. 철자가 틀린 이름은 애니메이션이 자동으로 아무 작업도 수행하지 않는 가장 일반적인 단일 이유입니다. 브라우저에는 바인딩할 규칙이 없기 때문입니다.

모든 것이 브라우저에서 실행됩니다. 사전 설정을 선택하고,기간 및 지연 슬라이더를 드래그하고,완화 곡선을 전환하고,애니메이션이 영원히 또는 고정된 횟수로 반복되도록 설정하고,다시 보기 위해 재생을 누릅니다. 이 도구는 키프레임 이름을 먼저 사용하여 안전한 순서로 속기를 작성하고,0 일 때 지연을 삭제하고,CSS 기본값과 일치하는 부분을 생략하여 출력을 계속 읽을 수 있도록 합니다. 계정이 없고,아무것도 업로드되지 않으며,페이지가 로드된 후에도 생성기가 계속 작동합니다.

또한 성능 트레이드 오프를 볼 수 있게 합니다. 프리셋은 가능한 한 변환과 불투명도에 애니메이션을 적용합니다. 왜냐하면 이 두 속성은 컴포지터에 의해 처리되고 브라우저가 레이아웃을 다시 계산하도록 강요하지 않기 때문에 높은 프레임 속도에서 부드럽게 유지되기 때문입니다. 너비,높이, 상단 또는 여백을 애니메이션하는 대신 모든 프레임의 페이지를 다시 계산하고 말더듬의 일반적인 원인입니다. translateY 에서 빌드된 바운스를 보는 것은 상단이 아닌 그 어떤 양의 읽기보다 왜 부드러운지에 대한 더 빠른 교훈입니다.