CSS ④ 전환 효과 - (1) transition, 실습 예제(쇼핑몰 상품 목록)

전환?

요소(element)의 속성(property)이 변경될 때부드럽게변경되는 효과 제공
예) 요소의 배경색이 변경될 때 바로 변경되는 것이 아니라 일정 시간이 지나면 서서히 변경되는 효과를 줄 수 있습니다.

전환 효과가 없는 경우

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box1 {
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .box1:hover {
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
</body>
</html>

뭔가 허전한 느낌.

전환 효과 적용한 경우

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box1 {
      width: 100px;
      height: 100px;
      background-color: red;
      transition-property: all;
      transition-duration: 1s;
      transition-delay: .3s;
    }
    .box1:hover {
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
</body>
</html>

아까보다 부드러운 느낌

트랜지션과 속성

transition-property : 트랜지션의 대상 지정
transition-duration : 트랜지션을 실행할 시간 지정
transition-delay : 트랜지션의 지연 시간 지정
transition-timing-function : 트랜지션의 실행 형태 지정
transition : 속성 한꺼번에 지정

📌 전환 효과는 반드시 transition-property 속성과 transition-duration 속성을 함께 사용해야 함.

transition-property 속성

트랜지션의 대상 지정

transition-properry : [속성값];

none : 전환 효과 속성을 지정하지 않습니다.
all : 모든 속성을 전환 효과 대상으로 지정합니다.
개별적으로 지정 가능 👇

transition-duration 속성

트랜지션을 실행할 시간 지정

transition-duration: [시간];

예) transition-duration: 2s;

transition-delay 속성

트랜지션 발생 지연 시간 지정

transition-timing-function 속성

전환 효과의 진행 속도 지정
정해진 키워드와 cubic-bezier() 함수(사용자 지정)을 사용할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 0 auto;
    }
    .red-box {
      background-color: orangered;
      width: 100px;
      height: 100px;
      transition: all;
      transition-duration: 2s;
      transition-delay: .3s;
      margin-bottom: 10px;
    }
    .red-box:hover {
      background-color: blue;
      width: 800px;
    }
    .red-box:nth-child(1) {
      transition-timing-function: linear;
    }
    .red-box:nth-child(2) {
      transition-timing-function: ease;
    }
    .red-box:nth-child(3) {
      transition-timing-function: ease-in;
    }
    .red-box:nth-child(4) {
      transition-timing-function: ease-out;
    }
    .red-box:nth-child(5) {
      transition-timing-function: ease-in-out;
    }
  </style>
</head>
<body>
  <!-- 요소의 속성이 변경될 때 '부드럽게' 변경되는 효과 제공(시간이 개입됨) -->
  <div class="red-box">liner</div>
  <div class="red-box">ease</div>
  <div class="red-box">ease-in</div>
  <div class="red-box">ease-out</div>
  <div class="red-box">ease-in-out</div>
</body>
</html>

크롬 개발자 도구에서도 확인 가능

transition 속성으로 한번에 지정하기

기본 형태)
transition: property, duration, timing-function, delay;
예시)
transition:width, 1s, ease-in, 1s;

실습 예제 - 상품 정보 표시하기

해당 상품에 마우스 오버시 상품 정보 표시 하기
트랜지션 효과 적용하기
상품 1, 상품 2, 상품 3 타이틀만 다르고 내용을 동일하게
opacity: 0; 이면 화면에 보이지 않음(투명도를 조정하는 속성)

코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>신상품 목록</title>
  <style>
    #container {
        width: 1000px;
        margin: 20px auto;
    }
    h1 {
        text-align: center;
        font-size: 30px;
    }
    ul {
        list-style: none;
        padding: 0;
    }

    li {
        float: left;
        padding: 0px;
        margin: 10px;
        position: relative;
        overflow: hidden;
    }
    img {
        margin: 0px;
        padding: 0px;
        z-index: 5;
        float: left;
    }

    li .caption {
        position: absolute;
        left: -200px;
        width: 300px;
        height: 200px;
        padding-top: 20px;
        background-color: rgba(0, 0, 0, .6);
        opacity: 0;
        transition: .8s .2s ease-in-out;
        z-index: 10;
    }
    li:hover .caption {
        opacity: 1;
        transform: translateX(200px);
    }

    .caption h2, .caption p {
        color: white;
        text-align: center;
    }
  </style>
</head>
<body>
  <div id="container">
    <h1>신상품 목록</h1>
    <ul>
      <li>
        <img src="./images/prod1.jpg" alt="상품1">
        <div class="caption">
          <h2>상품1</h2>
          <p>상품1에 대한 설명 텍스트</p>
          <p>가격 : 12,500원</p>
        </div>
      </li>
      <li>
        <img src="./images/prod2.jpg" alt="상품2">
        <div class="caption">
          <h2>상품2</h2>
          <p>상품2에 대한 설명 텍스트</p>
          <p>가격 : 20,900원</p>
        </div>
      </li>
      <li>
        <img src="./images/prod3.jpg" alt="상품3">
        <div class="caption">
          <h2>상품3</h2>
          <p>상품3에 대한 설명 텍스트</p>
          <p>가격 : 9,000원</p>
        </div>
      </li>
    </ul>
  </div>
</body>
</html>

저작자표시 비영리 변경금지 (새창열림)

'🎨 Frontend > HTML & CSS' 카테고리의 다른 글

CSS ④ 전환 효과 - (3) 변형 효과(transform) (0)	2023.03.16
CSS ④ 전환 효과 - (2) 애니메이션 속성 (2)	2023.03.15
CSS ⭐ ③ 필수 속성 - (3) 연습 문제 (2)	2023.03.15
CSS ⭐ ③ 필수 속성 - (2) 화면 배치 (1)	2023.03.15
CSS ⭐ ③ 필수 속성 - (1) 텍스트, 박스 모델 속성 (0)	2023.03.14

전환?