CSS
6.6
전환 효과 속성 적용하기
6.6.1 전환이란
CSS에서 한 요소에 적용된 스타일 속성값을 다른 속성값으로 변하게 하는 것을 전환(transition)이라고 합니다. 전환이 어떤 건지 다음 코드를 보며 이해해 봅시다.
06/06/transition.html
<style>
.red-box{
width:100px;
height:100px;
background-color:red;
}
.red-box:hover{
background-color:blue;
}
</style>
</head>
<body>
<div class="red-box"></div>
</body>
그림 6-70 실행결과
코드를 실행하면 빨간색 요소가 보입니다. 빨간색 요소에 마우스를 올리면 :hover 가상 클래스 선택자 때문에 파란색으로 변합니다. 이처럼 전환은 기존 속성값이 다른 값으로 변경되는 것을 말합니다. 그리고 CSS3에서 이런 전환이 발생할 때, 전환 효과를 직접 속성으로 지정할 수 있는 전환 효과 속성이 새로 추가됐습니다.