CSS3를 처음 접하는 사람들에게 CSS3에서 가장 신기한 기능이 무엇인지 물어본다면 아마 대부분 사람들은 transition을 꼽을 것입니다. 그도 그럴것이 기존의 웹 환경에서 플래시를 사용하지 않고 모션 효과를 주기 위해서는 복잡한 JavaScript의 코드를 일일이 작성해야 했습니다. 그러나 CSS3의 transition을 사용하면 누구나 간단한 설정만으로도 직관적인 모션을 제작할 수 있고 그 효과 또한 탁월하기 때문입니다. 이번에는 CSS3의 꽃이라고 할 수 있는 transition, 즉 전환 효과에 대해 배워보도록 하겠습니다. transition의 기본 구분은 다음과 같습니다.
(1) transition : 속성명 전환시간 가속도 설정 지연시간;
※ transition은 보통 가상 선택자 :hover를 이요해 마우스 오버 시 변경된 CSS 형태로의 전환 효과를 적용합니다.
다음의 예제를 통해 transition의 기본 개념을 숙지해 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>transition</title>
<style>
div {
width: 400px;
height: 400px;
background: pink;
margin: 100px auto;
transition: all 1s ease 0s;
}
div:hover {
transform: rotate(45deg);
background: dodgerblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html><div> 태그를 생성합니다. 먼저 <div>의 넓이와 높이, 배경색 등의 모양을 잡아준 뒤, transition을 설정합니다. 해당 예제에 적용된 transition 구문을 풀이하자면 '모든 css속성의 변경사항에 대해서 1초의 시간동안 가속도를 적용하여 지연시간 없이 전환 효과를 구현하라.' 입니다. 전환 효과를 적용하였으므로 최종적으로 :hover시에 변경될 css구문을 입력합니다. 여기서는 45도 회전과 함께 배경색을 dodgerblue로 설정했습니다.
※ transition 구문의 위치는 변경 후인 :hover 부분이 아니라 변경이 일어나기 전인 원래의 태그 선택자입니다.
해당 <div>에 마우스 오버 시 시계방향으로 45도 회전하면서 부드럽게 배경색이 변경됩니다.
'💕IT 공부하기 > CSS3' 카테고리의 다른 글
| [CSS3] mediaquery : 반응형 웹의 핵심, 원하는 화면 해상도별로 원하는 CSS를 연결하기 (0) | 2023.05.10 |
|---|---|
| [CSS3] animation : 미리 지정해둔 설정 값에 따라 자동으로 실행되는 모션 만들기 (0) | 2023.05.03 |
| [CSS3] transform(3d변형) : 특정 요소의 모양을 3차원 공간에서 입체적으로 변형하기 (0) | 2023.04.29 |
| [CSS3] transform(2d변형) : 특정 요소의 모양을 평면상에서 자유롭게 변형하기 (0) | 2023.04.27 |
| [CSS3] box-sizing : 볼록 요소의 넓이와 높이 값 안에 padding과 border 값 포함하기 (0) | 2023.04.25 |