Motion Tuner

페이지의 CSS transition / animation 을 실시간으로 조절하고 CSS 코드로 내보냅니다.

눈으로 보고, 직접 조절하는 웹 모션 도구 — Motion Tuner “조금 더 빠르게”, “더 부드럽게”를 실제 화면에서 조절해 보세요. 코드를 직접 수정하지 않아도 웹페이지의 CSS 움직임을 확인하고, 원하는 설정을 개발자에게 전달할 수 있습니다. 주요 기능 • 화면에서 움직임이 있는 요소를 직접 선택 • 걸리는 시간과 시작 전 대기 시간 조절 • 자연스럽게, 경쾌하게 등 움직임 느낌 선택 • 호버·누르기 효과와 지원되는 등장 효과 미리보기 • 여러 요소의 순차 애니메이션과 간격 조절 • 변경한 설정 되돌리기 • CSS 코드와 모션 수정 요청 내용 복사 사용 방법 1. 조절할 웹페이지에서 Motion Tuner를 실행합니다. 2. 보라색 테두리로 표시된 요소를 선택합니다. 3. 시간과 움직임 느낌을 조절하고 확인합니다. 4. ‘개발자에게 전달’을 눌러 수정 내용을 복사합니다. 디자이너와 개발자가 같은 화면을 보며 모션을 구체적으로 협의할 때 유용합니다. 지원 범위 CSS transition과 animation을 중심으로 동작합니다. 일부 외부 스타일, iframe 내부, JavaScript 기반 애니메이션은 감지나 미리보기가 제한될 수 있습니다. 변경 사항은 현재 페이지에서 미리보기로 적용되며, 사이트 원본에 저장되지 않습니다.