여러 개의 전환(transition) 효과를 동시에 적용하려면 CSS3의 transition 속성을 사용하면 됩니다. transition은 단축 속성(shorthand property)으로, 전환할 속성 이름, 지속 시간(duration), 타이밍 함수(timing function), 지연 시간(delay)을 한 줄에서 모두 지정할 수 있습니다.
여러 전환을 적용할 때는 각 전환을 쉼표(,)로 구분하여 나열합니다. 예를 들어 요소의 너비와 모서리 둥글기를 동시에 전환하려면 다음과 같이 작성합니다.
transition: width 2s, border-radius 2s;
다음은 CSS3를 사용해 여러 전환을 수행하는 완전한 예제 코드입니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
.container div {
width: 300px;
height: 100px;
border-radius: 1px;
background: rgb(25, 0, 255);
border: 2px solid red;
transition: width 2s, border-radius 2s;
}
.container:hover div {
width: 100px;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>다중 전환 예제</h1>
<div class="container">
<div></div>
</div>
<h2>
위 div에 마우스를 올리면 너비가 줄어들고 원형으로 변합니다
</h2>
</body>
</html>동작 방식
이 예제에서는 :hover 가상 클래스를 활용했습니다. 파란색 사각형 div 위에 마우스 커서를 올리면 width가 300px에서 100px로 줄어들고, 동시에 border-radius가 1px에서 50%로 변경되어 요소가 원 형태로 바뀝니다. 두 속성 모두 2초에 걸쳐 부드럽게 전환되므로, 사각형이 서서히 줄어들며 원으로 변하는 애니메이션 효과를 확인할 수 있습니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
