16.transition

1. 개요

MDN

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

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. 호버된 이미지가 확대되서 보여지는 효과

[미리보기]

코드작성

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() 가상클래스는 형제요소들 중에서 지정된 순번의 요소를 지정한다.

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의 폭은 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;
}