트랜지션 (Transition) 속성 정리
1. 트랜지션 (백과사전 바로가기)
- 웹 요소의 배경 색이 바뀌거나 도형의 테두리가 원형으로 바뀌는 것처럼 스타일 속성이 바뀌는 것
2. 트랜지션의 유형
| 속성 | 설명 |
| transition-property | 트랜지션 대상을 설정 |
| transition-duration | 트랜지션 진행 시간을 설정 |
| transition-timing-function | 트랜지션 속도 곡선을 설정 |
| transition-delay | 트랜지션 지연 시간을 설정 |
| transtion | 위 4가지의 속성을 한꺼번에 설정 |
3. 연습문제
<!-- Example1 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<div class="tr1"></div>
</body>
</html>
.tr1 {
width: 100px;
height: 100px;
background-color: blue;
border: 1px solid black;
/* 너비를 2초 동안, 높이를 1초에 걸쳐 트랜지션함 */
transition: width 2s, height 1s;
}
.tr1:hover {
width: 200px;
height: 120px;
}
<!-- Example2 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<div class="tr1">
<h1>!</h1>
</div>
</body>
</html>
.tr1 > h1 {text-align: center;}
.tr1 {
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
/* */
transition: background-color, 2s, width, 2s, transform, 3s, height, 3s;
}
.tr1:hover {
width: 200px;
height: 200px;
background-color: #ff6e5f;
transform: rotate(180deg);
}
4. transition-timing-function 속성
- 트랜지션 속도 곡선 지정
| 속성 값 | 설명 |
| liner | 시작부터 끝까지 똑같은 속도로 트랜지션을 진행 |
| ease | 처음에는 천천히 시작하고 점점 빨라지다가 마지막에는 천천히 끝냄 (기본값) |
| ease-in | 시작을 느리게 함 |
| ease-out | 느리게 끝냄 |
| ease-in-out | 느리게 시작하고 느리게 끝냄 |
'Front-End Study > HTML+CSS' 카테고리의 다른 글
| flex 관련 속성 정리 1 (0) | 2022.10.27 |
|---|---|
| float 속성 정리 (0) | 2022.10.21 |
| 가상 요소 (0) | 2022.10.12 |
| 테이블 관련 태그 정리 (0) | 2022.10.12 |
| 주요 선택자 (0) | 2022.10.10 |