# 16.transition

css

# 목차

1. 개요
2. 기본문법
3. 속성
4. 예제
- 4.1. 호버된 이미지가 확대되서 보여지는 효과

# 1. 개요

MDN

https://developer.mozilla.org/ko/docs/Web/CSS/transition

요소에 두 가지 상태 사이에 변화를 줄 수 있다.

# 2. 기본문법

transition: <property> <duration> <timing-function> <delay>;

예시: transition: opacity 300ms ease-in;

# 3. 속성

속성 명	초기값	설명
transition-property	all	트랜지션 속성
transition-duration	Os	지속시간
transition-timing-function	ease	속도변화 지정
transition-delay	Os	시작 전 지연 시간 지정

# 4. 예제

# 4.1. 호버된 이미지가 확대되서 보여지는 효과

미리보기

https://qwerewqwerew.github.io/source/css/16-transition/

# 1. html 작성

html

<section class="container">
	<ul>
		<li>
			<div class="content">
				<h2>타이틀</h2>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, laborum vitae neque labore illum possimus assumenda eos. Saepe modi odio qui asperiores voluptatem ullam autem in, consequuntur eveniet, unde iure.</p>
			</div>
		</li>
		<li>
			<div class="content">
				<h2>타이틀</h2>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, laborum vitae neque labore illum possimus assumenda eos. Saepe modi odio qui asperiores voluptatem ullam autem in, consequuntur eveniet, unde iure.</p>
			</div>
		</li>
		<li>
			<div class="content">
				<h2>타이틀</h2>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, laborum vitae neque labore illum possimus assumenda eos. Saepe modi odio qui asperiores voluptatem ullam autem in, consequuntur eveniet, unde iure.</p>
			</div>
		</li>
		<li>
			<div class="content">
				<h2>타이틀</h2>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, laborum vitae neque labore illum possimus assumenda eos. Saepe modi odio qui asperiores voluptatem ullam autem in, consequuntur eveniet, unde iure.</p>
			</div>
		</li>
		<li>
			<div class="content">
				<h2>타이틀</h2>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, laborum vitae neque labore illum possimus assumenda eos. Saepe modi odio qui asperiores voluptatem ullam autem in, consequuntur eveniet, unde iure.</p>
			</div>
		</li>
		<li>
			<div class="content">
				<h2>타이틀</h2>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, laborum vitae neque labore illum possimus assumenda eos. Saepe modi odio qui asperiores voluptatem ullam autem in, consequuntur eveniet, unde iure.</p>
			</div>
		</li>
	</ul>
</section>

# 2. css 작성

body 선택자에는 마진과 패딩을 0으로 지정하고 글꼴과 배경색 지정한다. .container는 폭은 100%, 높이는 100vh를 지정한다. ul 선택자의 폭과 높이는 100%로 지정하고 ul li 선택자에는 초기 크기가 각각 균등하게 보여지도록 폭을 20%로 지정하고 border-box를 지정해서 외곽선을 포함한 크기가되도록 한다. float 속성의 값을 left로 입력해서 좌측으로 정렬되도록 한다.

Code

body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	background-color: skyblue;
}
.container {
	position: relative;
	width: 100%;
	height: 100vh;
}
p {
	font-size: 20px;
}
ul {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #ccc;
	margin: 0;
	padding: 0;
	background: url('imgs/img5.JPG');
	background-size: cover;
	background-position: left;
}
ul li {
	list-style: none;
	position: relative;
	width: 20%;
	height: 100%;
	border-right: 1px solid rgb(233, 233, 233);
	float: left;
	box-sizing: border-box;
	transition: 0.3s;
	text-align: center;
}

ul li:nth-child(1)에 배경이미지를 지정하고 background-size 속성 값은 cover로 지정해서 화면을 채우도록 설정한다. 그 다음 background-position은 left 또는 center를 설정해서 확인한 후 어울리는 것으로 지정한다. ※ :nth-child() 가상클래스는 형제요소들 중에서 지정된 순번의 요소를 지정한다.

ul li:nth-child(1) {
	background: url('imgs/1.jpg');
	background-size: cover;
	background-position: center;
}
ul li:nth-child(2) {
	background: url('imgs/2.jpg');
	background-size: cover;
	background-position: center;
}
ul li:nth-child(3) {
	background: url('imgs/3.jpg');
	background-size: cover;
	background-position: center;
}
ul li:nth-child(4) {
	background: url('imgs/4.jpg');
	background-size: cover;
	background-position: center;
}
ul li:nth-child(5) {
	background: url('imgs/5.jpg');
	background-size: cover;
	background-position: center;
}

ul에 호버되면 li의 폭은 10%가 되고 li에 호버가되면 폭이 60%가 되고 이를 합치면 100%가 되므로 화면의 채우면서 각 각의 이미지 위로 이동하면 자연스럽게 트랜지션이 되는 것을 확인 할 수 있다.

Code

ul:hover li {
	width: 10%;
}
ul li:hover {
	width: 60%;
}
ul li .content {
	position: absolute;
	left: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 3);
	box-sizing: border-box;
	color: white;
	opacity: 0;
	padding: 60px 40px 60px;
}
ul li:hover .content {
	bottom: 0;
	transition: 300ms;
	transition-delay: 150ms;
	opacity: 1;
}

css transition