transition

transition

• 속성을 서서히 변화시키는 속성 (IE버전 10부터 지원)
• 요소의 변화를 일정 기간(duration)동안 일어나게 함(속성을 서서히 변화시키는 속성)
• 자동으로 발동되지 않음
  ( hover와 같은 가상 클래스 선택자(Pseudo-Classes) 또는 onclick 같은 event 처럼 JavaScript의 부수적인 액션에 의해 발동한다. 즉, div에 기본 속성과 transition을 준 뒤, div:hover에 변화를 주고싶은 속성값을 정해주변 hover시, 변화가 나타난다)

---

✅ transition-property

• transition의 대상이 되는 CSS 프로퍼티명을 지정한다. (지정하지 않는 경우 모든 프로퍼티가 트랜지션의 대상이 된다.)
• 복수의 프로퍼티를 지정하는 경우 쉼표(,)로 구분한다.

div {
      width: 100px;
      height: 50px;
      background-color: red;
      margin-bottom: 10px;

      transition-property: width, background-color;
      transition-duration: 2s, 2s;
    }


div:hover {
      width: 300px;
      background-color: blue;
    }

✅ transition-duration

• transition에 일어나는 지속시간(duration)을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다.
• 프로퍼티값을 지정하지 않을 경우 기본값 0s이 적용되어 어떠한 트랜지션 효과도 볼 수 없다.

 /* 예시(1) */
  div {
      width: 100px; 
      height: 50px;
      background-color: red;
      margin-bottom: 10px;

      transition-property: width, background-color;
      transition-duration: 2s, 2s;
      /* transition: width 2s, background-color 2s; */
    }


    div:hover {
      width: 300px;
      background-color: blue;
    }


 /* 예시(2) */
 div {
      width: 100px;
      height: 50px;
      color: white;
      background-color: red;

      /* width, opacity 2개의 속성에 변화를 줄 예정 */
      transition-property: width, opacity;
    }

    div:nth-child(1) {
      transition-duration: 0.5s;  
      /* 첫번째 div는 width, opacity 모두 0.5초 기간동안 변화 발생*/
    }

    div:nth-child(2) {
      transition-duration: 2s, 1s;  
      /* 두번째 div는 width는 2초, opacity는 1초 기간동안 변화 발생
      ❗ transition-duration 프로퍼티값은 transition-property 프로퍼티값과 1:1 대응한다 
      (2s = width, 1s = opacity) 
      */
    }

    /* hover가 되면 width와 opacity에 지정한 값만큼 속성 변화가 생긴다*/
    div:hover {
      width: 300px;
      opacity: .1;
    }

✅ transition-timing-function

• 트랜지션 효과의 변화 흐름, 시간에 따른 변화 속도와 같은 일종의 변화의 리듬을 지정한다.
  (대부분의 타이밍 함수는 큐빅 베이지어(cubic bezier)를 정의하는 네 점에 의해 정의되므로 상응하는 함수의 그래프로 제공해서 명시할 수 있다.)
• transition-timing-function 프로퍼티값으로 미리 정해둔 5개의 키워드가 제공된다. (기본값은 ease)

참고 사이트: https://poiemaweb.com/css3-transition

/* 모든 div의 기본 값 적용(transition속성과 기간 명시) */
div { 
	width: 100px;
	transition: width 1s;
    }

/* 첫 번째 div는 linear속도로 변화 발생 */ 
#div_01 { 
	transition-timing-function: linear;
    }

/* 두 번째 div는 ease-in-out속도로 변화 발생 */ 
#div_02 { 
	transition-timing-function: ease-in-out;
    }


/* hover시, 지정한 속성값처럼 변화가 발생한다 */ 
div:hover { 
	width: 300px; 
    }

✅ transition-delay

transition-delay 속성은 전환(transition) 효과가 나타나기 전까지의 지연 시간을 설정하며, 전환(transition) 효과는 이 메소드로 설정된 시간이 흐른 뒤에야 비로소 시작된다.

#resize {
        height: 100px;
        width: 150px;
	transition: width 1s, height 2s;
	transition-delay: 1s;
    }
#resize:hover { 
	width: 300px; 
    	height: 300px; 
    }