CSS3 전환 효과란?
CSS3에서 전환(Transition) 효과를 만들려면 transition 속성을 사용합니다. 전환 효과는 요소의 스타일이 한 값에서 다른 값으로 부드럽게 변화하도록 만들어 주는 기능으로, 마우스 오버(hover)나 클릭 같은 사용자 인터랙션에 따라 자연스러운 애니메이션을 구현할 수 있습니다.
transition 속성은 다음과 같은 하위 속성들을 포함합니다.
- transition-property: 전환 효과를 적용할 CSS 속성 지정
- transition-duration: 전환이 완료되는 데 걸리는 시간 지정
- transition-timing-function: 전환의 속도 곡선(ease, linear 등) 지정
- transition-delay: 전환이 시작되기 전 대기 시간 지정
CSS3 전환 효과 예제 코드
아래는 CSS3의 transition 속성을 활용해 전환 효과를 구현한 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container div {
width: 300px;
height: 100px;
background: rgb(25, 0, 255);
border: 2px solid red;
transition: width 2s;
}
.container:hover div {
width: 100px;
}
</style>
</head>
<body>
<h1>전환 효과 예제</h1>
<div class="container">
<div></div>
</div>
<h2>위 div에 마우스를 올리면 너비가 줄어듭니다</h2>
</body>
</html>코드 설명
이 코드의 핵심 동작 방식은 다음과 같습니다.
.container div선택자는 너비 300px, 높이 100px, 파란색 배경과 빨간색 테두리를 가진 박스를 정의합니다.transition: width 2s;선언은 너비(width) 속성의 변화가 2초에 걸쳐 부드럽게 일어나도록 설정합니다..container:hover div선택자는 컨테이너에 마우스를 올렸을 때 박스의 너비가 100px로 줄어들도록 합니다.
즉, 마우스를 올리는 순간 너비가 즉시 바뀌는 것이 아니라 2초 동안 점진적으로 줄어드는 애니메이션 효과가 나타납니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
div 위에 마우스를 올린 후에는 박스의 너비가 300px에서 100px로 2초에 걸쳐 부드럽게 줄어듭니다.
추가 팁: 더 풍부한 전환 효과 만들기
여러 속성에 동시에 전환 효과를 적용하고 싶다면 속성을 쉼표로 구분하여 작성할 수 있습니다.
transition: width 2s, height 1s ease-in-out, background-color 0.5s;
또한 ease, linear, ease-in, ease-out, ease-in-out 같은 타이밍 함수를 활용하면 전환의 가속과 감속 느낌을 조절해 더욱 세련된 UI를 만들 수 있습니다.