CSS transition-timing-function

Gemini said

CSS 애니메이션에서 **이징(Easing)**은 한마디로 **'속도의 변화'**를 의미합니다.

물체가 움직일 때 처음부터 끝까지 일정한 속도로 움직이는 것이 아니라, 현실 세계의 물체처럼 서서히 가속하거나 감속하며 리듬감을 주는 기술이죠. 이징이 없으면 움직임이 딱딱하고 기계적으로 느껴지지만, 이징을 잘 활용하면 훨씬 자연스럽고 세련된 느낌을 줄 수 있습니다.

---

1. 주요 이징 종류 (Timing Function)

CSS에서는 transition-timing-function 또는 animation-timing-function 속성을 통해 이징을 조절합니다.

• linear: 시작부터 끝까지 일정한 속도로 움직입니다. (로딩 바 등에 사용)
• ease: 기본값입니다. 처음엔 천천히 시작했다가 중간에 빨라지고, 끝날 때 다시 느려집니다.
• ease-in: 천천히 시작해서 점점 빨라집니다. (화면 밖으로 나가는 요소에 적합)
• ease-out: 빠르게 시작해서 천천히 멈춥니다. (화면 안으로 들어오는 요소에 적합)
• ease-in-out: 천천히 시작하고 중간에 빨랐다가 다시 천천히 끝납니다.

---

2. 코드 예제

아래는 마우스를 올렸을 때(hover) 서로 다른 이징 값이 어떻게 움직이는지 비교할 수 있는 예제입니다.

HTML

 

<div class="container">
  <div class="box linear">Linear (일정하게)</div>
  <div class="box ease-in">Ease-In (가속)</div>
  <div class="box ease-out">Ease-Out (감속)</div>
</div>

<style>
  .box {
    width: 150px;
    height: 50px;
    margin: 10px;
    background-color: #3498db;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 2초 동안 위치를 이동시키는 트랜지션 설정 */
    transition: transform 2s;
  }

  .container:hover .box {
    transform: translateX(400px);
  }

  /* 이징 부여 */
  .linear { transition-timing-function: linear; }
  .ease-in { transition-timing-function: ease-in; }
  .ease-out { transition-timing-function: ease-out; }
</style>

---

3. 나만의 속도 만들기: cubic-bezier

미리 정해진 값 외에 내가 원하는 독특한 움직임을 만들고 싶다면 cubic-bezier(x1, y1, x2, y2)를 사용합니다.

예를 들어, 공이 튀어 오르는 듯한 효과나 아주 급격한 가속도를 만들 때 유용합니다. 보통은 직접 숫자를 입력하기보다 cubic-bezier.com 같은 사이트에서 그래프를 그려보고 코드를 복사해서 사용하곤 합니다.

💡 팁: 사용자가 클릭했을 때 나타나는 팝업이나 메뉴는 ease-out을 사용해 보세요. 반응이 즉각적이면서도 끝부분이 부드러워 훨씬 고급스러워 보입니다.

 

---

---

참고하면 도움되는 사이트

---

https://easings.net/ko#

Easing Functions Cheat Sheet

 

---

https://matthewlein.com/tools/ceaser

Ceaser - CSS Easing Animation Tool - Matthew Lein

 

---