이징 함수: ease, linear, cubic-bezier
내장 키워드와 cubic-bezier() 함수를 사용해 전환 속도 곡선을 제어합니다.
이징 함수: ease, linear, cubic-bezier은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
이징 함수란 무엇입니까
이징 함수는 전환이나 애니메이션의 속도 곡선, 즉 지속 시간 동안 얼마나 빠르게 가속하거나 감속하는지를 제어합니다.
선형
linear는 전환 전체에서 일정한 속도를 유지합니다. 일정한 움직임이 필요한 로딩 막대와 진행률 표시기에 유용합니다.
<div class="progress-track"><div class="progress"></div></div>ease(기본값)
ease는 빠르게 시작한 다음 끝부분에서 느려집니다. 기본값이며 대부분의 사용자 인터페이스 전환에 자연스럽게 느껴집니다.
ease-in
ease-in은 느리게 시작하여 가속합니다. 화면 밖으로 나가는 요소의 종료 애니메이션에 적합합니다.
<div class="modal">Open</div>
<div class="modal closing">Closing (faded to invisible)</div>ease-out
ease-out은 빠르게 시작하여 감속합니다. 화면에 들어오는 요소에 적합하며, 요소가 힘 있게 나타난 뒤 부드럽게 멈추게 합니다.
<div class="modal opening">Modal content</div>ease-in-out
ease-in-out은 느리게 시작하고 끝나며 중간에 더 빠르게 움직입니다. 반복 애니메이션이나 앞뒤로 움직이는 애니메이션에 가장 적합합니다.
3차 베지어 곡선 함수
네 개의 제어점으로 사용자 지정 3차 베지어 곡선을 정의합니다. 스프링과 같은 효과나 사용자 지정 이징 곡선을 만들 수 있습니다.
<div class="card">Card</div>cubic-bezier 값 읽기
네 개의 값은 두 개의 제어점을 정의합니다: cubic-bezier(x1, y1, x2, y2). y축에서 1보다 큰 값을 사용하면 초과 이동(스프링) 효과가 만들어집니다. 곡선을 시각화하려면 easings.net과 같은 도구를 사용하십시오.
steps() 함수
steps(n, direction)은 애니메이션을 n개의 불연속적인 동일한 단계로 나눕니다. 스프라이트 애니메이션과 타자기 효과에 적합합니다.
<div class="sprite"></div>steps() 방향 키워드
두 번째 인수는 단계가 발생하는 위치를 제어합니다.
jump-start: 시간 0에 첫 번째 단계jump-end: 종료 시점에 마지막 단계(기본값)jump-both: 시작과 끝 모두에서 단계 발생jump-none: 양쪽 끝에서 단계가 발생하지 않음
최신 방식: 복잡한 곡선에 사용하는 linear()
새로운 linear() 함수는 여러 점을 통해 임의의 이징 곡선을 정의할 수 있게 해 줍니다. 따라서 cubic-bezier의 제한 없이 순수 CSS만으로 스프링과 바운스 효과를 만들 수 있습니다.
<div class="spring">Spring easing</div>빠른 확인
전환 전체에서 일정한 속도를 유지하는 이징 함수는 무엇입니까?
복습
이징 함수는 애니메이션의 속도 곡선을 제어합니다. 기본 제공 옵션으로는 linear, ease, ease-in, ease-out, ease-in-out이 있습니다. 사용자 지정 곡선에는 cubic-bezier()를 사용합니다. 불연속 단계에는 steps()를 사용합니다. 새로운 linear() 함수는 복잡한 스프링 형태의 곡선을 만들 수 있게 해 줍니다.
자주 묻는 질문
“이징 함수: ease, linear, cubic-bezier” 강의는 무료인가요?
네 — “이징 함수: ease, linear, cubic-bezier” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“이징 함수: ease, linear, cubic-bezier”에서 뭘 배우나요?
내장 키워드와 cubic-bezier() 함수를 사용해 전환 속도 곡선을 제어합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“이징 함수: ease, linear, cubic-bezier” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 전환 속성, 지속 시간 및 타이밍
- 이징 함수: ease, linear, cubic-bezier
- 여러 속성 전환
- 성능: 변환 가능 속성과 다시 그리는 속성