이징 함수 시각화 도구

카드를 클릭하면 CSS cubic-bezier() 값 또는 TypeScript 함수 코드가 클립보드에 복사됩니다. 호버하여 애니메이션을 미리 봅니다.

easeInSine

easeOutSine

easeInOutSine

easeInQuad

easeOutQuad

easeInOutQuad

easeInCubic

easeOutCubic

easeInOutCubic

easeInQuart

easeOutQuart

easeInOutQuart

easeInQuint

easeOutQuint

easeInOutQuint

easeInExpo

easeOutExpo

easeInOutExpo

easeInCirc

easeOutCirc

easeInOutCirc

easeInBack

easeOutBack

easeInOutBack

easeInElastic

easeOutElastic

easeInOutElastic

easeInBounce

easeOutBounce

easeInOutBounce

소개 & FAQ

소개: 30가지 이징 함수를 시각화하고 비교 — 인터랙티브 커브, 호버 애니메이션, CSS cubic-bezier() 또는 TypeScript 코드 원클릭 복사. 모든 처리는 네이티브 JavaScript를 사용하여 브라우저에서 로컬로 수행됩니다 — 어떤 서버에도 데이터가 전송되지 않습니다. PWA로 완전히 오프라인에서 작동합니다.

자주 묻는 질문

어떤 이징 함수가 포함되어 있나요?

이 도구는 10개 카테고리에 걸쳐 30가지 표준 이징 함수를 시각화합니다: Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back, Elastic, Bounce. 각 카테고리에는 easeIn(느린 시작), easeOut(느린 끝), easeInOut(느린 시작과 끝) 세 가지 변형이 있습니다.

CSS cubic-bezier() 값을 복사할 수 있나요?

네. 카드를 클릭하면 CSS cubic-bezier() 값이 클립보드에 복사됩니다. cubic-bezier로 표현할 수 없는 Elastic과 Bounce 함수의 경우 TypeScript 함수 코드가 대신 복사됩니다.

이 도구는 오프라인에서 작동하나요?

2Kit은 PWA입니다. 첫 방문 후 완전히 오프라인으로 작동합니다.

데이터가 서버로 전송되나요?

아니요. 모든 커브 렌더링과 애니메이션은 HTML Canvas API를 사용하여 브라우저에서 완전히 실행됩니다. 아무것도 업로드되거나 전송되지 않습니다.

기술 구현

모든 처리는 브라우저 내에서만 실행됩니다 — 어떤 서버에도 데이터를 전송하지 않습니다. 이 도구는 프로그레시브 웹 앱(PWA)으로 완전한 오프라인 사용이 가능합니다: 첫 방문 후 모든 페이지와 리소스가 Service Worker에 의해 캐시되어 인터넷 연결 없이도 사용할 수 있습니다. 입력 데이터가 기기를 벗어나지 않아 API 키, 비밀번호, 개인 설정, 기밀 문서 등 민감한 콘텐츠를 안전하게 처리할 수 있습니다.

▸ 사이트 색인

English json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Deutsch json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Español json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Français json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Indonesia json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Italiano json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

日本語 json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

한국어 json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Nederlands json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Polski json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Português json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Русский json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Türkçe json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

Tiếng Việt json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions

中文 json-formatter html-formatter css-formatter base64 url-codec password-gen hash-generator text-diff text-transform color-converter easing-functions