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. 호버된 이미지가 확대되서 보여지는 효과
[미리보기]
- 코드작성
- Code
- Code
- Code
1. html 작성
- html
1<section class="container">2 <ul>3 <li>4 <div class="content">5 <h2>타이틀</h2>6 <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>7 </div>8 </li>9 <li>10 <div class="content">11 <h2>타이틀</h2>12 <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>13 </div>14 </li>15 <li>16 <div class="content">17 <h2>타이틀</h2>18 <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>19 </div>20 </li>21 <li>22 <div class="content">23 <h2>타이틀</h2>24 <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>25 </div>26 </li>27 <li>28 <div class="content">29 <h2>타이틀</h2>30 <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>31 </div>32 </li>33 <li>34 <div class="content">35 <h2>타이틀</h2>36 <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>37 </div>38 </li>39 </ul>40</section>2. css 작성
body선택자에는 마진과 패딩을 0으로 지정하고 글꼴과 배경색 지정한다..container는 폭은 100%, 높이는 100vh를 지정한다.ul선택자의 폭과 높이는 100%로 지정하고ul li선택자에는 초기 크기가 각각 균등하게 보여지도록 폭을 20%로 지정하고 border-box를 지정해서 외곽선을 포함한 크기가되도록 한다.float속성의 값을left로 입력해서 좌측으로 정렬되도록 한다.
- Code
1body {2 margin: 0;3 padding: 0;4 font-family: sans-serif;5 background-color: skyblue;6}7.container {8 position: relative;9 width: 100%;10 height: 100vh;11}12p {13 font-size: 20px;14}15ul {16 position: absolute;17 top: 0;18 left: 0;19 width: 100%;20 height: 100%;21 background-color: #ccc;22 margin: 0;23 padding: 0;24 background: url('imgs/img5.JPG');25 background-size: cover;26 background-position: left;27}28ul li {29 list-style: none;30 position: relative;31 width: 20%;32 height: 100%;33 border-right: 1px solid rgb(233, 233, 233);34 float: left;35 box-sizing: border-box;36 transition: 0.3s;37 text-align: center;38}
ul li:nth-child(1)에 배경이미지를 지정하고background-size속성 값은cover로 지정해서 화면을 채우도록 설정한다. 그 다음background-position은left또는center를 설정해서 확인한 후 어울리는 것으로 지정한다. ※ :nth-child() 가상클래스는 형제요소들 중에서 지정된 순번의 요소를 지정한다.
- Code
1ul li:nth-child(1) {2 background: url('imgs/1.jpg');3 background-size: cover;4 background-position: center;5}6ul li:nth-child(2) {7 background: url('imgs/2.jpg');8 background-size: cover;9 background-position: center;10}11ul li:nth-child(3) {12 background: url('imgs/3.jpg');13 background-size: cover;14 background-position: center;15}16ul li:nth-child(4) {17 background: url('imgs/4.jpg');18 background-size: cover;19 background-position: center;20}21ul li:nth-child(5) {22 background: url('imgs/5.jpg');23 background-size: cover;24 background-position: center;25}
ul에 호버되면li의 폭은 10%가 되고li에 호버가되면 폭이 60%가 되고 이를 합치면 100%가 되므로 화면의 채우면서 각 각의 이미지 위로 이동하면 자연스럽게 트랜지션이 되는 것을 확인 할 수 있다.
- Code
1ul:hover li {2 width: 10%;3}4ul li:hover {5 width: 60%;6}7ul li .content {8 position: absolute;9 left: 0;10 width: 100%;11 background-color: rgba(0, 0, 0, 3);12 box-sizing: border-box;13 color: white;14 opacity: 0;15 padding: 60px 40px 60px;16}17ul li:hover .content {18 bottom: 0;19 transition: 300ms;20 transition-delay: 150ms;21 opacity: 1;22}