CSS에서 마우스 호버(hover) 효과의 속도를 조절하려면 transition-duration 속성을 사용합니다. 이 속성은 요소의 스타일이 변경될 때 전환이 일어나는 시간을 초 단위로 지정할 수 있어, 부드럽고 자연스러운 애니메이션 효과를 만들어 줍니다.
호버 상태 자체를 정의할 때는 :hover 선택자를 사용합니다. 사용자가 마우스 포인터를 요소 위에 올렸을 때 적용될 스타일을 이 선택자 안에 작성하면 됩니다.
기본 문법
transition-duration: 2s;
위 코드처럼 값을 초(s) 또는 밀리초(ms) 단위로 지정합니다. 값이 클수록 전환 속도가 느려지고, 작을수록 빨라집니다.
예제
아래 예제는 버튼에 마우스를 올렸을 때 배경색이 노란색에서 주황색으로 2초에 걸쳐 서서히 변하는 호버 효과를 보여줍니다. 직접 실행해 보세요!
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
background-color: yellow;
color: black;
text-align: center;
font-size: 15px;
padding: 20px;
border-radius: 15px;
border: 3px dashed blue;
transition-duration: 2s;
}
.btn:hover {
background-color: orange;
color: black;
border: 3px solid blue;
}
</style>
</head>
<body>
<h2>결과</h2>
<p>아래 버튼에 마우스를 올려보세요:</p>
<button class = "btn">결과 확인</button>
</body>
</html>코드 설명
- .btn 클래스: 버튼의 기본 스타일을 정의합니다. 노란색 배경, 파란색 점선 테두리가 적용되며,
transition-duration: 2s;덕분에 모든 스타일 변화가 2초 동안 부드럽게 진행됩니다. - .btn:hover 선택자: 마우스를 올렸을 때 배경색이 주황색으로 바뀌고, 점선 테두리가 실선으로 변경됩니다. 이 변화 역시 2초에 걸쳐 천천히 나타납니다.
참고 사항
전환 속도를 더 세밀하게 제어하고 싶다면 transition-timing-function(ease, linear, ease-in 등) 속성을 함께 사용하면 됩니다. 또한 여러 속성에 각각 다른 전환 시간을 적용하려면 쉼표로 구분하여 지정할 수 있습니다.