transition 속성

Notice

Recent Posts

Recent Comments

Link

« 2026/05 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Tags more

Archives

Today

Total

관리 메뉴

無제

transition 속성 본문

<style>

transition 속성

yo-u-loo 2026. 3. 27. 14:13

🟢 transition

요소의 스타일이 변할 때, 변화 과정을 일정 시간 동안 점진적으로 부드럽게 애니메이션 효과처럼 보여주는 속성.

🎯 핵심 속성 4가지 🎯

🔹 transition-property

변화 줄 대상 속성 지정.

.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;
}

자주 사용하는 값: all (전체), background-color, width, height, transform, opacity 등

🔹 transition-duration [필수]

변화가 일어날 지속 시간 설정. (단위: s 또는 ms)

.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

변화의 속도 곡선 지정.

.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;
}

속도의 변화 방식 (느낌)
- linear: 일정한 속도로 변화.
- ease: 느리게 시작 → 빠르게 진행 → 느리게 끝남. (기본값)
- ease-in: 느리게 시작 → 빠르게 끝남.
- ease-out: 빠르게 시작 → 느리게 끝남.
- ease-in-out: 느리게 시작 → 빠르게 진행 → 느리게 끝남.
- cubic-bezier(x1, y1, x2, y2): 사용자 정의 속도 곡선.

🔹 transition-delay

변화가 시작되기 전 대기 시간 설정. (단위: s)

.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;
}

선택사항 (자주 쓰지 않음)

🔨 단축 속성(Shorthand)

selector {
  transition: [property] [duration] [timing-function] [delay];
}

문법: transition: 속성 시간 타이밍함수 대기시간;
- 주의: 속성 하나 안에서는 공백, 여러 개의 transition을 나열할 때는 콤마(,)

🔥 함께 사용하는 중요 속성 🔥

🔹 transform-origin

변형(transform)의 기준점(중심점), 방식을 정하는 속성

.box {
  /* 왼쪽 위 꼭짓점을 기준으로 회전 */
  transform-origin: left top;
  transform: rotate(45deg);
}

기본값은 정중앙(50% 50%)이지만, 왼쪽 위나 오른쪽 아래 등으로 바꿀 수 있다.

📍 POINT 📍

✔️ duration 이 설정되지 않으면 기본값이 0이므로 아무런 효과가 나타나지 않는다. ✔️

✔️ all 키워드를 쓰면 해당 요소의 모든 변경 가능한 속성에 자동으로 효과가 적용된다. ✔️

✔️ 마우스 호버(:hover)뿐만 아니라 자바스크립트로 클래스를 추가/제거할 때도 transition은 작동한다. ✔️

✔️ cursor: pointer; 와 같이 사용하면 가독성이 좋다. ✔️

📋 속성별 상세 요약표 📋

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

⚙️ 실전 예제 코드 ⚙️

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Transition 핵심 예제</title>
<style>
  body {
    font-family: Arial, sans-serif;
    padding: 40px;
  }

  /* 버튼 */
  .button {
    width: 150px;
    height: 50px;
    background-color: #3498db;
    color: white;
    border: none;
    cursor: pointer;
    margin-bottom: 50px;
    /* 모든 속성을(all) 0.5초 동안(0.5s) 부드럽게(ease-in-out) 변화 */
    transition: all 0.5s ease-in-out;
  }

   /* 마우스를 올렸을 때의 변화 */
  .button:hover {
    background-color: #2ecc71;
    width: 200px;
    border-radius: 25px;
    transform: scale(1.1);
  }

  .container {
    border: 1px solid #ddd;
    padding: 20px;
  }  

  /* 박스 */
  .box {
    width: 150px;
    height: 50px;
    margin: 10px 0;
    background-color: #3498db;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 2초 동안 위치 이동 */
    transition: transform 2s;
  }
  
  /* hover 시 이동 */
  .container:hover .box { transform: translateX(300px); }

  /* 이징 차이 */
  .linear { transition-timing-function: linear; }

  .ease-in { transition-timing-function: ease-in; }

  .ease-out { transition-timing-function: ease-out; }
</style>
</head>
<body>
  <h2>버튼 애니메이션</h2>
  <button class="button">Hover Me</button>
  <h2>이징 함수 비교 (마우스 올려보세요)</h2>
  <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>
</body>
</html>

🔗 cubic-bezier ( 사용자 정의 속도 곡선) 🔗

https://cubic-bezier.com/#.17,.67,.83,.67

cubic-bezier.com

https://easings.net/ko#

Easing Functions Cheat Sheet

Easing functions specify the speed of animation to make the movement more natural. Real objects don’t just move at a constant speed, and do not start and stop in an instant. This page helps you choose the right easing function.

easings.net

https://matthewlein.com/tools/ceaser

Ceaser - CSS Easing Animation Tool - Matthew Lein

Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go. Now that we can use CSS transitions in all the modern browsers, let’s make them

matthewlein.com

'<style>' 카테고리의 다른 글

perspective (0)	2026.03.27
CSS의 Animation과 @keyframes (0)	2026.03.27
Functions의 filter속성과 함수 (0)	2026.03.27
transform 속성과 functions (함수) (0)	2026.03.26
Pseudo-elements (의사 요소) (0)	2026.03.26

'<style>' Related Articles

無제

transition 속성 본문

transition 속성

🟢 transition

'<style>' 카테고리의 다른 글

티스토리툴바