16 transition
1. 개요
요소에 두 가지 상태 사이에 변화를 줄 수 있다.
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. 호버된 이미지가 확대되서 보여지는 효과
[미리보기]
- 코드작성
- html
- Code
- Code
- Code
- Code
- Code
- Code
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><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>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;
}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: 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: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: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;
}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;
}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><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;
}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() 가상클래스는 형제요소들 중에서 지정된 순번의 요소를 지정한다.
- Code
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: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;
}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;
}