개발자 유틸
Easing 미리보기
easing 함수를 움직임, 크기, 투명도, 회전, 패널, 그래프, 비교, cubic-bezier 편집, CSS/JavaScript 코드로 미리봅니다.
Easing 모션 작업 공간
easing을 고르고 재생을 조정한 뒤 곡선을 비교하고, custom cubic-bezier와 코드 출력을 바로 확인합니다.
실시간 미리보기
현재 재생 프레임의 easing 값으로 오브젝트를 움직입니다.
동시 비교
도구 안내
Easing 미리보기
Easing 미리보기란?
Easing 미리보기는 timing function이 실제 UI 모션에서 어떻게 보이는지 확인하고 CSS, JavaScript, 그래프, 공유 설정으로 바꿔주는 도구입니다.
사용 방법
- 목록에서 easing을 고르거나 custom cubic-bezier를 편집합니다.
- duration, delay, distance, 재생 방식, 미리보기 유형을 조정합니다.
- 그래프와 비교 레인에서 여러 곡선을 함께 확인합니다.
- 코드, 설정 JSON, 공유 URL 또는 그래프를 내보냅니다.
주의사항
많은 부드러운 곡선은 CSS cubic-bezier로 표현할 수 있지만 Bounce와 Elastic 계열은 정확한 움직임에 JavaScript가 필요합니다.
FAQ
Easing이 무엇인가요?
Easing은 선형 시간을 움직임 값으로 바꿔 가속, 감속, overshoot, bounce 같은 느낌을 만드는 방식입니다.
cubic-bezier와 JavaScript easing 함수는 무엇이 다른가요?
cubic-bezier는 두 제어점으로 만드는 CSS timing 곡선이고, JavaScript 함수는 더 복잡한 수식을 표현할 수 있습니다.
Bounce나 Elastic을 CSS로 그대로 복사할 수 있나요?
단일 cubic-bezier로는 정확히 같게 만들기 어렵습니다. 정확한 Bounce/Elastic이 필요하면 JavaScript 함수를 사용하세요.
핑퐁 반복은 CSS에서 어떻게 표현하나요?
animation-iteration-count를 infinite로 두고 animation-direction을 alternate 또는 alternate-reverse로 설정합니다.
여러 easing을 동시에 비교할 수 있나요?
네. 목록에서 비교 체크박스를 선택하면 됩니다. 화면이 복잡해지지 않도록 최대 6개로 제한합니다.
관련 도구
4 도구