색상 코드 변환
HEX, RGB, HSL과 투명도를 변환하고 색을 미리 보며 바로 쓸 수 있는 CSS 값을 복사합니다.
CSS 베지어 이징 편집기
두 제어점을 조절하고 전환 효과를 재생해 cubic-bezier 이징 함수를 생성합니다.
X는 0~1, Y는 범위를 벗어나도록 설정할 수 있습니다. 끌기와 방향키를 지원하며 Shift로 이동 간격을 늘릴 수 있습니다.
CSS
도구 소개
전환의 가속·감속이나 목표를 살짝 넘는 움직임을 곡선과 대조해 조정할 수 있습니다.
사용 방법
자주 쓰는 프리셋을 고른 뒤 제어점을 끌거나 X1, Y1, X2, Y2를 입력하세요. 방향키로도 조절할 수 있고 Shift를 누르면 조정 폭이 커집니다. 미리보기 시간을 정하고 재생을 눌러 확인한 뒤 CSS를 복사하거나 다운로드하세요. 재생은 언제든 멈출 수 있습니다.
X는 0–1, Y는 −2–3 범위여서 반대 방향으로 움직이거나 끝점을 넘는 효과도 만들 수 있습니다. 내보내는 내용은 이징 선언이며 미리보기 시간이나 전체 애니메이션은 포함되지 않습니다. 시스템의 동작 줄이기 설정을 켜면 이동 미리보기는 재생하지 않지만 편집과 저장은 가능합니다.
자주 묻는 질문
완전한 애니메이션을 내보내나요?
transition-timing-function만 내보냅니다. 시간과 대상 속성은 별도로 설정하세요. 제어점 x는 0~1, y는 −2~3 범위입니다.
곡선이 유효한데 재생을 눌러도 움직이지 않는 이유는 무엇인가요?
시스템의 동작 줄이기 설정이 켜져 있으면 미리보기 이동 애니메이션을 재생하지 않습니다. 곡선 편집과 내보내기는 계속 사용할 수 있습니다. 해당 설정이 꺼져 있다면 미리보기 시간이 100–5,000ms 범위인지 확인하세요. 이 시간은 미리보기에만 적용됩니다.
관련 도구
새 탭에서 열립니다
댓글
0