CSS 트랜지션

CSS 트랜지션: 부드러운 변화를 위한 마법

CSS 트랜지션은 HTML 요소의 스타일 속성이 한 값에서 다른 값으로 변경될 때, 그 사이를 부드럽게 이어주는 효과를 만들어냅니다. 마치 애니메이션처럼 말이죠! 이를 통해 웹 페이지에 생동감을 더하고 사용자 경험을 향상시킬 수 있습니다.

트랜지션의 기본 구조

CSS

transition: property duration timing-function delay;

코드를 사용할 때는 주의가 필요합니다.

 

• property: 변경될 스타일 속성 (예: background-color, width, height, opacity 등)
• duration: 변화에 걸리는 시간 (초 단위)
• timing-function: 변화의 속도를 조절하는 함수 (ease, linear, ease-in, ease-out 등)
• delay: 변화가 시작되기까지 기다리는 시간 (초 단위)

예제를 통한 이해

1. 마우스를 올리면 배경색이 부드럽게 변하는 버튼

HTML

<button>버튼</button>

코드를 사용할 때는 주의가 필요합니다.

 

CSS

button {
  transition: background-color 0.5s ease;
}

button:hover {
  background-color: blue;
}

코드를 사용할 때는 주의가 필요합니다.

 

• transition: background-color 0.5s ease;: 버튼의 배경색이 0.5초 동안 부드럽게 변하며, ease 함수를 사용하여 처음과 끝 부분에서 속도가 느려지는 효과를 줍니다.
• button:hover: 마우스를 버튼 위에 올리면 배경색이 파란색으로 바뀝니다.

2. 클릭 시 박스의 크기가 커지는 효과

HTML

<div class="box"></div>

코드를 사용할 때는 주의가 필요합니다.

 

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 0.3s ease-out, height 0.3s ease-out;
}

.box:active {
  width: 200px;
  height: 200px;
}

코드를 사용할 때는 주의가 필요합니다.

 

• transition: width 0.3s ease-out, height 0.3s ease-out;: 박스의 너비와 높이가 0.3초 동안 부드럽게 변하며, ease-out 함수를 사용하여 끝 부분에서 속도가 느려지는 효과를 줍니다.
• .box:active: 박스를 클릭하면 너비와 높이가 2배로 커집니다.

다양한 timing-function

• linear: 속도가 일정하게 유지됩니다.
• ease: 처음과 끝 부분에서 속도가 느려지고 가운데 부분에서 속도가 빨라집니다.
• ease-in: 처음 부분에서 속도가 느리고 끝 부분으로 갈수록 속도가 빨라집니다.
• ease-out: 처음 부분에서 속도가 빠르고 끝 부분으로 갈수록 속도가 느려집니다.
• ease-in-out: 처음과 끝 부분에서 속도가 느리고 가운데 부분에서 속도가 빨라집니다.
• cubic-bezier(x1, y1, x2, y2): 자신만의 커스텀 속도 곡선을 만들 수 있습니다.

더 많은 활용

• 메뉴 애니메이션: 메뉴가 열리고 닫힐 때 부드러운 효과를 줄 수 있습니다.
• 모달 창: 모달 창이 나타나고 사라질 때 부드러운 전환을 만들 수 있습니다.
• 페이지 전환: 페이지가 전환될 때 시각적인 효과를 줄 수 있습니다.
• 인포그래픽: 데이터가 변화할 때 시각적으로 매력적인 효과를 줄 수 있습니다.

주의할 점

• 브라우저 호환성: 모든 브라우저에서 트랜지션을 완벽하게 지원하지 않을 수 있습니다. vendor prefix (-webkit-, -moz- 등)를 사용하여 호환성을 높일 수 있습니다.
• 성능: 너무 많은 요소에 트랜지션을 적용하면 브라우저 성능이 저하될 수 있습니다. 필요한 부분에만 적용하는 것이 좋습니다.