CSS -12

- transform

CSS transform의 정의

transform은 단어 뜻 그대로 요소의 모양, 크기, 위치, 회전을 시각적으로 변경할 때 사용하는 속성입니다.

이 속성의 가장 큰 특징은 요소가 페이지의 일반적인 흐름(레이아웃)을 방해하지 않으면서 시각적으로만 변화를 준다는 점입니다.

따라서 다른 주변 요소들에 영향을 주지 않고도 자유롭게 변형할 수 있어 애니메이션 구현에 매우 효율적입니다.

 

transform의 중요 함수 (Functions)

transform 속성 뒤에는 다양한 함수를 붙여 어떤 변형을 줄지 결정합니다.

• translate(x, y): 요소를 현재 위치에서 지정한 거리만큼 이동시킵니다.
• scale(x, y): 요소를 지정한 배수만큼 확대 또는 축소합니다. (1보다 크면 확대, 작으면 축소)
• rotate(deg): 요소를 지정한 각도만큼 회전시킵니다. (예: 45deg)
• skew(x, y): 요소를 지정한 각도만큼 비틀어서 왜곡합니다.

 

함께 사용하는 중요 속성

함수 외에도 변형의 기준이나 방식을 정하는 중요한 속성들이 있습니다.

• transform-origin: 변형이 시작되는 기준점을 정합니다. 기본값은 정중앙(50% 50%)이지만, 왼쪽 위나 오른쪽 아래 등으로 바꿀 수 있습니다.
• transition: transform이 일어날 때 부드럽게 변하는 과정을 보여줍니다. (애니메이션 효과의 필수 파트너)

 

실전 예제 코드: "마우스를 올리면 변하는 버튼"

가장 많이 쓰이는 '호버 효과'를 통해 transform의 강력함을 확인해 보세요.

CSS

 

.box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  /* 부드러운 변화를 위해 transition 추가 */
  transition: transform 0.3s ease;
}

/* 마우스를 올렸을 때(hover) 변형 발생 */
.box:hover {
  /* 오른쪽으로 20px 이동, 1.2배 확대, 10도 회전 */
  transform: translate(20px, 0) scale(1.2) rotate(10deg);
}

 

transform 함수 요약표

함수	역할	단위	예시
translate	위치 이동	px, %	translateX(50px)
scale	크기 조절	배수(숫자)	scale(1.5)
rotate	회전	deg	rotate(180deg)
skew	기울기(비틀기)	deg	skewY(20deg)

 

학습 정리

• transform은 요소의 물리적 공간을 차지하지 않고 시각적인 형태만 바꾼다.
• 여러 함수를 공백으로 구분하여 동시에 적용할 수 있다.
• transition과 결합하면 복잡한 자바스크립트 없이도 멋진 애니메이션을 만들 수 있다

 

연습 예제

translate (이동) 예제

요소를 현재 위치에서 X축(가로)이나 Y축(세로)으로 밀어냅니다.

CSS

 

.move-box {
  width: 100px;
  height: 100px;
  background-color: #ff6b6b;
  transition: transform 0.3s;
}

/* 마우스를 올리면 오른쪽으로 50px, 위쪽으로 20px 이동 */
.move-box:hover {
  transform: translate(50px, -20px);
}

 

 

scale (확대/축소) 예제

요소의 크기를 비율로 조절합니다. 1이 기준이며, 1.5는 150%, 0.5는 50% 크기를 의미합니다.

CSS

 

.scale-box {
  width: 100px;
  height: 100px;
  background-color: #4ecdc4;
  transition: transform 0.3s;
}

/* 마우스를 올리면 전체 크기가 1.2배 커짐 */
.scale-box:hover {
  transform: scale(1.2);
}

/* 팁: 가로만 키우고 싶다면 scaleX(1.5), 세로만 키우고 싶다면 scaleY(1.5) */

 

rotate (회전) 예제

요소를 시계 방향(양수) 또는 시계 반대 방향(음수)으로 돌립니다.

CSS

 

.rotate-box {
  width: 100px;
  height: 100px;
  background-color: #feca57;
  transition: transform 0.5s;
}

/* 마우스를 올리면 시계 방향으로 45도 회전 */
.rotate-box:hover {
  transform: rotate(45deg);
}

 

skew (비틀기) 예제

요소의 면을 잡아당겨 평행사변형 형태로 왜곡합니다.

CSS

 

.skew-box {
  width: 100px;
  height: 100px;
  background-color: #a29bfe;
  transition: transform 0.3s;
}

/* 마우스를 올리면 X축 방향으로 20도 기울어짐 */
.skew-box:hover {
  transform: skewX(20deg);
}

 

여러 함수 한 번에 쓰기 (복합 변형)

여러 효과를 동시에 주고 싶을 때는 공백 한 칸을 띄우고 나열하면 됩니다.

CSS

 

.multi-box {
  width: 100px;
  height: 100px;
  background-color: #ff9f43;
  transition: transform 0.4s;
}

/* 커지면서 회전하고 이동까지 동시에 수행 */
.multi-box:hover {
  transform: scale(1.3) rotate(360deg) translate(30px, 30px);
}

 

연습 팁

• transition: 0.3s;를 꼭 추가해 보세요. 이 코드가 없으면 애니메이션 없이 결과값으로 뚝딱 변하게 됩니다.
• 단위를 잊지 마세요. translate는 px나 %, rotate와 skew는 deg 단위를 반드시 써야 작동합니다

 

- transition

CSS transition의 정의

transition은 CSS 속성값이 변경될 때(예: 마우스 호버 시 색상 변경), 그 변화가 즉시 일어나지 않고 일정한 시간 동안 부드럽게 전환되도록 제어하는 속성입니다.

상태의 변화(State A → State B)를 자연스러운 움직임으로 이어주는 가교 역할을 합니다.

 

transition의 4가지 핵심 속성

transition은 총 4가지 세부 속성으로 구성됩니다.

• transition-property: 변화를 줄 대상 속성을 정합니다. (예: background-color, transform, all)
• transition-duration: 변화가 일어날 지속 시간을 설정합니다. (단위: s 또는 ms) [필수]
• transition-timing-function: 변화의 속도 곡선을 정합니다. (예: 서서히 시작하다 빨라짐)
• transition-delay: 변화가 시작되기 전 대기 시간을 설정합니다.

 

중요 타이밍 함수 (Timing Functions)

움직임의 '느낌'을 결정하는 가장 중요한 요소입니다.

• ease: 기본값. 천천히 시작해서 빨라졌다가 다시 천천히 끝납니다.
• linear: 처음부터 끝까지 일정한 속도로 움직입니다.
• ease-in: 천천히 시작해서 속도가 붙으며 끝납니다.
• ease-out: 빠르게 시작해서 끝날 때 천천히 멈춥니다.
• cubic-bezier(n,n,n,n): 나만의 고유한 속도 곡선을 직접 수치로 정의합니다.

 

실전 예제 코드: "종합 선물 세트"

한 줄로 줄여 쓰는 단축 속성(Shorthand) 방식을 실무에서는 가장 선호합니다.

구조: transition: 속성 시간 타이밍함수 대기시간;

CSS

 

.button {
  width: 150px;
  height: 50px;
  background-color: #3498db;
  color: white;
  border: none;
  cursor: pointer;

  /* 1. 모든 속성을(all) 2. 0.5초 동안(0.5s) 3. 부드럽게(ease-in-out) 변화시킴 */
  transition: all 0.5s ease-in-out;
}

/* 마우스를 올렸을 때의 변화 */
.button:hover {
  background-color: #2ecc71; /* 배경색 변경 */
  width: 200px;              /* 너비 변경 */
  border-radius: 25px;       /* 모양 변경 */
  transform: scale(1.1);      /* 크기 약간 확대 */
}

 

속성별 상세 요약표

세부 속성	설명	예시
property	변화를 감시할 CSS 속성	opacity, width, all
duration	애니메이션 재생 시간	0.3s, 500ms
timing-function	속도의 흐름 (가속도)	linear, ease-in
delay	실제 시작까지 기다리는 시간	1s (1초 후 시작)

 

학습 정리

• **duration**이 설정되지 않으면 기본값이 0이므로 아무런 효과가 나타나지 않는다.
• all 키워드를 쓰면 해당 요소의 모든 변경 가능한 속성에 자동으로 효과가 적용된다.
• 마우스 호버(:hover)뿐만 아니라 자바스크립트로 클래스를 추가/제거할 때도 transition은 작동한다.

 

 

 

연습 예제

transition-property (대상 지정)

어떤 속성에만 부드러운 효과를 줄지 선택합니다.

CSS

 

.prop-box {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  /* 배경색(background-color) 변화에만 1초간 효과를 줍니다. */
  /* 너비(width) 변화는 즉시 일어납니다. */
  transition-property: background-color;
  transition-duration: 1s;
}

.prop-box:hover {
  background-color: #8e44ad;
  width: 200px;
}

 

transition-duration (시간 설정)

애니메이션이 얼마나 오래 지속될지 결정합니다.

CSS

 

.dur-box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transition-property: transform;
}

.fast { transition-duration: 0.2s; } /* 아주 빠르게 */
.slow { transition-duration: 2s; }   /* 아주 느리게 */

.dur-box:hover {
  transform: rotate(180deg);
}

 

transition-timing-function (속도 조절)

변화의 리듬(가속도)을 결정합니다.

CSS

 

.time-box {
  width: 100px;
  height: 50px;
  margin-bottom: 10px;
  background-color: #2ecc71;
  transition: width 1s; /* 단축 속성 사용 */
}

.linear { transition-timing-function: linear; } /* 일정한 속도 */
.ease-in { transition-timing-function: ease-in; } /* 시작은 느리게, 끝은 빠르게 */
.out { transition-timing-function: cubic-bezier(0, 0.5, 0.5, 1); } /* 커스텀 곡선 */

.container:hover .time-box {
  width: 300px;
}

 

transition-delay (대기 시간)

마우스를 올린 후 '언제' 애니메이션을 시작할지 정합니다.

CSS

 

.delay-box {
  width: 100px;
  height: 100px;
  background-color: #f1c40f;
  /* 1초를 기다린 후에 0.5초 동안 변화가 일어납니다. */
  transition-duration: 0.5s;
  transition-delay: 1s;
}

.delay-box:hover {
  border-radius: 50%;
  background-color: #f39c12;
}

 

 

실무 팁: 여러 속성에 각기 다른 시간 주기

쉼표(,)를 사용하여 속성마다 서로 다른 시간과 타이밍을 적용할 수 있습니다.

CSS

 

.complex-box {
  width: 100px;
  height: 100px;
  background-color: gray;
  /* 너비는 0.3초 만에, 배경색은 1초 뒤에 2초 동안 천천히 변경 */
  transition: width 0.3s ease, background-color 2s 1s linear;
}

.complex-box:hover {
  width: 200px;
  background-color: pink;
}

 

연습 포인트

• all 키워드: transition-property: all;이라고 쓰면 모든 수치형 CSS 속성에 효과가 적용되어 편리합니다
• 반대 방향: 마우스를 뗐을 때도 부드럽게 돌아오는 이유는 transition이 :hover가 아닌 원래의 클래스 상태에 정의되어 있기 때문입니다

 

- CSS transition-timing-function

Gemini said

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

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

 

주요 이징 종류 (Timing Function)

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

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

 

코드 예제

아래는 마우스를 올렸을 때(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>

 

 

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

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

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

 

팁

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

 

참고하면 도움되는 사이트

cubic-bezier.com

cubic-bezier.com

 

https://easings.net/ko#

Easing Functions Cheat Sheet

 

https://matthewlein.com/tools/ceaser

Ceaser - CSS Easing Animation Tool - Matthew Lein