CSS 애니메이션 생성기 무료 온라인: 시각적으로 애니메이션 만들기

A 프리셋을 선택하거나 수동으로 지속 시간, 딜레이, 반복, timing function을 설정. 라이브 미리보기.

A 애니메이션 속도 제어: linear(일정), ease(부드러운), ease-in(느리게 시작), ease-out(느리게 끝), ease-in-out(양쪽).

A 네, @keyframes 규칙과 animation 속성 모두 생성됩니다.

A 물론입니다. 생성기에서 '지속 시간' 슬라이더를 찾으세요. 왼쪽으로 드래그하면 시간이 줄어들어 애니메이션이 더 빨라집니다. 오른쪽으로 드래그하면 시간이 늘어납니다. 라이브 미리보기가 즉시 업데이트되어 1.5초 애니메이션과 0.5초 애니메이션이 어떻게 보이는지 정확하게 보여줍니다. 이를 통해 실시간으로 타이밍을 미세 조정할 수 있습니다.

A 네, 하지만 명확한 차이가 있습니다. 이 도구는 페이지 로드 시 또는 CSS 클래스를 통해 실행되는 CSS 애니메이션을 생성합니다. 호버 효과의 경우 생성된 애니메이션을 직접 `:hover` 가상 클래스로 감싸야 합니다. 전용 호버 토글은 아직 없습니다. 스크롤 트리거 애니메이션은 JavaScript(Intersection Observer 등)가 필요하며, 요소가 화면에 들어올 때 클래스를 추가합니다. 생성기는 핵심 애니메이션을 제공하고, 실행 시점은 사용자가 제어합니다. 실용적인 팁: 코드를 내보내고 기본적으로 `paused` 상태를 설정한 후, 스크롤 시 JS로 재개하세요.

A 저희 생성기는 전체 @keyframes 블록을 만들 뿐, 호버 트리거는 포함하지 않습니다. 내보낸 애니메이션을 수동으로 :hover 의사 클래스로 감싸야 해요. 예를 들어 .my-element 클래스를 복사해 .my-element:hover로 이름을 바꾸고 애니메이션 코드를 붙여넣으세요. 라이브 미리보기는 로드 시 애니메이션만 보여주므로, 호버 효과는 직접 에디터에서 테스트해야 합니다. 학생들이 CSS를 직접 분석하는 교육용 데모에 특히 유용합니다.

A 전혀 그렇지 않습니다. CSS 애니메이션은 메인 브라우저 스레드 대신 GPU에서 실행되므로 JavaScript 기반 방식보다 훨씬 효율적입니다. 키프레임 5개짜리 @keyframes 블록 하나는 파일 크기를 약 200바이트만 늘립니다. 같은 효과를 내는 5KB jQuery 플러그인과 비교해보세요. 수십 개의 복잡한 애니메이션을 동시에 실행해야 성능 저하를 느낄 수 있습니다. 대부분의 프로젝트에서 영향은 무시할 수준입니다. 실용적인 팁: 모바일 기기에서는 box-shadow나 filter 같은 속성 애니메이션을 피하세요 — 여전히 무거운 리페인트를 유발합니다.

A 끊김 현상은 거의 항상 잘못된 속성을 애니메이션할 때 발생합니다. transform과 opacity만 사용하세요. 이 속성들은 GPU를 통해 처리되어 60fps로 부드럽게 유지됩니다. width, height, margin을 애니메이션하면 매 프레임마다 레이아웃을 다시 계산해야 해서 버벅입니다. 저희 도구는 기본적으로 transform과 opacity만 생성하도록 설계되었습니다. 확인 방법: DevTools Performance 탭을 열고 몇 초간 녹화한 후 보라색 Layout 막대가 있는지 보세요. 그게 부드러움을 망치는 주범입니다.