개발 공부 기록하기

DAY 27. 트랜지션(transition) 본문

프밍/CSS

DAY 27. 트랜지션(transition)

태영(泰伶) 2022. 12. 25. 23:49

transition: 변화, 전환

 

웹 요소의 배경색이나 스타일 속성이 시간에 따라 바뀌는 것.

 

 

위의 영상에서처럼 transition을 사용하면 완전히 색, 모양, 테두리 등을 바꿀 수 있다.

 

 

트랜지션transition의 속성 요약

종류 설명
transition-property 트랜지션의 대상 지정.
transition-duration 트랜지션을 실행할 시간 지정.
transition-timing-function 트랜지션의 실행 형태 지정.
transition-delay 트랜지션의 지연 시간 지정.
transition 위의 모든 속성을 한꺼번에 정함.

 

 

트랜지션 대상 지정: transition-property

어떤 속성에 트랜지션을 적용할 것인지 지정한다.

transition-property: all | none | 속성이름1, 속성이름2...

 

속성값 설명
all
 or 
아예 transition-property를 안 씀		 요소의 모든 속성에 트랜지션이 적용됨. default 값.
none 트랜지션을 하는 동안 아무 속성도 안 바뀜.
속성이름 트랜지션을 적용할 속성을 원하는 것만 지정함.
여러 개의 속성을 지정하고 싶을 때는 쉼표(,)로 구분해 나열함.

 

 

 

트랜지션 진행 시간 지정: transition-duration

트랜지션의 진행 시간을 지정해 속성이 자연스럽게 바뀌도록 애니메이션 효과를 만들 수 있다.

transition-duration: 시간;

 

시간 단위는 초(s),

그보다 더 세밀하게 조정하는 밀리초(ms)

가 있다.

또한, 시간 값을 0이나 그보다 작은 음수로 나타낸다면, 애니메이션 효과가 즉시 나타난다.

그냥 바뀌어버림;;

 

 

예제 1.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8" />
         <title>Transition</title>
         <style>
            .box {
               margin: 20px auto;
               width: 100px;
               height: 100px;
               background-color: #07f;
               border: 1px solid #222;
               transition-property: width, height;		/* 트랜지션 적용할 대상 - 너비, 높이 */
               transition-duration: 2s, 1s;			/* 트랜지션 시간 - 2초, 1초 */
            }
            .box:hover {
               width: 200px;
               height: 120px;
            }
         </style>
      </head>
      <body>
         <div class="box"></div>
      </body>
   </html>

↓

 

 

위의 예제에서는 width와 height(속성 2개)를 트랜지션 하는 데,

각각 2초와 1초의 시간(2개의 시간)을 주도록 되어있다.

 

하지만, transition-property에서 지정한 속성값의 개수와 transition-duration에서 지정한 속성값의 개수가 다르다면 어떻게 될까?

 

책에서는 속성 순서대로 시간값을 반복해서 적용한다고 되어있다.

그게 그래서 어떻게 적용된다는 것인지 바로 이해되지 않아서 MDN 사이트에 들어가 검색해보았다.

 

 

만약에

transition-property 속성값 개수  >  transition-duration 속성값 개수

로 가정한다면,

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}

││

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}

와 같이 적용된다는 뜻이고,

 

 

 

반대로,

transition-property 속성값 개수  <  transition-duration 속성값 개수

로 가정한다면,

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}

││

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}

처럼 transition-duration에 적힌 뒤쪽 두 개의 속성값은 버려버리는 결과를 나타내게 된다.

 

cf,

opacity: 불투명함.

즉, 불투명도를 지정하는 속성이라고 한다.

 

 

 

트랜지션 속도 곡선 지정: transition-timing-function

트랜지션 효과의 시작, 중간, 끝에서 속도를 지정해서 전체 속도 곡선을 만든다.

미리 정해진 키워드 or 베지에 곡선을 이용해 표현한다.

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2) ;

 

속성값 설명
linear 시작부터 끝까지 똑같은 속도로 진행함.
ease 처음엔 천천히 시작함 → 점점 빨라짐 → 마지막엔 천천히 끝남.
default값.
ease-in 느리게 시작함.
ease-out 느리게 끝냄.
ease-in-out 느리게 시작하고 느리게 끝냄.
cubic-bezier(x1, y1, x2, y2) 베지에 함수를 정의해서 사용함.
0 ≤ x1, y1, x2, y2 ≤ 1

 

예제 2.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8" />
         <title>transition-timing-function</title>
         <style>
            #ex div {
               float: left;
               width: 100px;
               height: 50px;
               margin: 5px 10px;
               padding: 5px;
               color: white;
               background-color: #006aff;
               border-radius: 5px;
               text-align: center;
               font-weight: bold;
            }
            #ex:hover div {
               height: 400px;
            }
            #ex .linear {
               transition: 3s linear;
            }
            #ex .ease {
               transition: 3s ease;
            }
            #ex .ease-in {
               transition: 3s ease-in;
            }
            #ex .ease-out {
               transition: 3s ease-out;
            }
            #ex .ease-in-out {
               transition: 3s ease-in-out;
            }
         </style>
      </head>
      <body>
         <div id="ex">
            <div class="linear"> linear </div>
            <div class="ease"> ease </div>
            <div class="ease-in"> ease-in </div>
            <div class="ease-out"> ease-out </div>
            <div class="ease-in-out"> ease-in-out </div>
         </div>
      </body>
   </html>

↓

베지에 함수를 이용하는 예제는 책에 없었다.

따로 공부를 하려고 검색해봤는데, 아주 정리 잘 해두신 분이 있어서 링크를 가져왔다.

이해하는 데 도움됐어요 감사합니다😊

https://basemenks.tistory.com/281

 

cubic-bezier 에 대해서 이보다 잘 정리할 수 없다

1. cubic-bezier란? cubic-bezier란 다음과 같습니다. 베지어 곡선은 부드러운 곡선을 모델링하기 위해 컴퓨터 그래픽에서 널리 사용된다. 커브가 컨트롤 포인트의 볼록한 선체에 완전히 포함되어 있기

basemenks.tistory.com

 

 

 

트랜지션 지연 시간 설정: transition-delay

트랜지션을 언제부터 시작할 것인지 지정한다.

transition-delay: 시간;

지정한 시간만큼 기다렸다가 애니메이션이 시작된다.

transition-duration처럼 초(s), 밀리초(ms) 단위를 사용하고, default값은 0이다.

 

 

(내가 만든) 예시 1.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8" />
         <title>transition-delay</title>
         <style>
            #ex div {
               float: left;
               width: 100px;
               height: 50px;
               margin: 5px 10px;
               padding: 5px;
               color: white;
               background-color: #006aff;
               border-radius: 5px;
               text-align: center;
               font-weight: bold;
            }
            #ex:hover div {
               height: 400px;
            }
            #ex .linear {
               transition: 3s linear;
            }
            #ex .lineardelay {
               transition: 3s 2s linear;
            }
         </style>
      </head>
      <body>
         <div id="ex">
            <div class="linear"> linear </div>
            <div class="lineardelay"> delay </div>
         </div>
      </body>
   </html>

↓

위의 예제 2를 살짝 변형해서 내가 만듦.

 

 

 

transition

위에서 했던 transition-property, transition-duration, transition-timing-function, transition-delay를 별도로 작성할 것 없이 transition 하나로 통합해서 작성할 수 있다.

 

시간값으로 작성하는 transition-duration, transition-delay를 둘 다 작성할 경우에는,

먼저 쓰인 값을 duration, 뒤에 쓰인 값을 delay로 간주한다.

 

그 외의 것들은 각각의 속성값의 형태가 다르니까 순서는 상관 없다.

 

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

 

예제 3.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8" />
         <title>transition통합</title>
         <style>
            .box {
               margin: 50px auto;
               width: 100px;
               height: 100px;
               background-color: #fb5;
               border: 1px solid #222;
               transition: 2s ease-in;		/* 대상: all, 시간 2초, 함수: ease-in */
            }
            .box:hover {			/* 여기 적힌 속성이 모두 트랜지션 대상 */
               width: 200px;
               height: 200px;
               background-color: #f50;
               transform: rotate(270deg);
            }
         </style>
      </head>
      <body>
         <div class="box"></div>
      </body>
   </html>

↓

 

 

 

 

 

책에 나온 실습 - 마우스 오버하면 상품 정보 표시하기.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>CSS3 애니메이션</title>
         <link rel="stylesheet" href="css/product.css">
      </head>
      <body>
         <div id="container">
            <h1>신상품 목록</h1>
            <ul class="prod-list">
               <li>
                  <img src="images/prod1.jpg">
                  <div class="caption">
                     <h2>상품 1</h2>
                     <p>상품 1 설명 텍스트</p>
                     <p>가격 : 12,345원</p>
                  </div>
               </li>
               <li>
                  <img src="images/prod2.jpg">
                  <div class="caption">
                     <h2>상품 2</h2>
                     <p>상품 2 설명 텍스트</p>
                     <p>가격 : 12,345원</p>
                  </div>
               </li>
               <li>
                  <img src="images/prod3.jpg">
                  <div class="caption">
                     <h2>상품 3</h2>
                     <p>상품 3 설명 텍스트</p>
                     <p>가격 : 12,345원</p>
                  </div>
               </li>
            </ul>
         </div>
      </body>
   </html>

+

#container {
  width:1000px;
  margin:20px auto;
}
h1 {
  text-align:center;
}
.prod-list {
  list-style:none;
  padding:0;
}
.prod-list li {
  float: left;
  padding: 0;
  margin: 10px;
  overflow: hidden;
}
.prod-list img {
  margin:0;
  padding:0;
  float:left;
  z-index:5;
}

↓

 

 

이렇게 제시된 예제에

 

① 상품 설명 글 안 보이게 불투명도를 0으로 지정하기

.prod-list .caption {
  position: absolute;
  top: 200px;					/* 기준 위치보다 200px 아래로 */
  width: 300px;
  height: 200px;
  padding-top: 20px;
  background: rgba(0, 0, 0, 0.6);		/* 반투명한 검정 배경 */
  opacity: 0;					/* 화면에 보이지 않게 */
  transition: all 0.6s ease-in-out;		/* 부드럽게 나타나도록 트랜지션 추가 */
  z-index: 10;					/* 다른 요소보다 위에 있도록 */
}

를 추가하고,

 

② position: absolute;를 정확하게 적용하기

     → .caption 요소의 부모 요소는 <li>니까 <li> 요소 스타일에 position: relative;를 추가로 적어 넣기

.prod-list li {
  float: left;
  padding: 0;
  margin: 10px;
  overflow: hidden;
  position: relative;
}

 

그다음,

 

③ 마우스 포인터를 올리면 상품 설명 글 보여주기

     → 상품 설명 글을 그림 위로 이동, 불투명도를 1로 수정할 수 있도록 추가로 적어 넣기.

.prod-list li:hover .caption {
  opacity: 1;					/* 설명 글을 화면에 나타나게 */
  transform: translateY(-200px);		/* 설명 글을 위쪽으로 200px 이동 */
}

 

④ 마지막으로, 그림 위에 나타난 상품 설명 글씨가 안 보이니까 흰색으로 바꾸도록 추가로 적어 넣기.

.prod-list .caption h2, .prod-list .caption p {
  color: #fff;
  text-align: center;
}

↓

 

저작자표시 비영리 변경금지

'프밍 > CSS' 카테고리의 다른 글

DAY 29. 단원 마무리 문제 풀기  (0) 2022.12.31
DAY 28. CSS 애니메이션  (1) 2022.12.30
Section 7. CSS 선택자의 세계(1)  (0) 2022.12.21
DAY 26. 변형(transform)  (1) 2022.12.14
Section 6. CSS 기초(2)  (1) 2022.12.12
'프밍/CSS' Related Articles more
Comments