[CSS] 트랜지션과 애니메이션(2) - transition

트랜지션(transition) 은 웹 요소의 배경색을 바꾸거나 도형의 테두리를 사각형에서 원형으로 바꾸는 것처럼 스타일 속성이 바뀌는 것을 말함. 트랜지션은 마이크로소프트 엣지와 인터넷 익스플로러 10이상에서 지원되며, 대부분의 최신 브라우저에서는 모두 지원됨.

트랜지션과 속성

① 트랜지션의 대상을 지정하는 transition-property 속성

transition-property: all | none | <속성 이름>

• all : all 값을 사용하거나 transition-property를 생략할 경우 요소의 모든 속성이 트랜지션 대상이 됨. 기본값
• none : 트랜지션을 하는 동안 아무 속성도 바뀌지 않음.
• 속성 이름 : 트랜지션 효과를 적용할 속성을 지정함. 속성이 여럿일 경우 쉼표(,)로 구분하여 나열함.

  transition-property: all;  /* 해당 요소의 모든 속성에 트랜지션 적용 */
  transition-property: background-color;  /* 해당 요소의 배경색에 트랜지션 적용 */
  transition-property: width, height;  /* 해당 요소의 너비와 높이에 트랜지션 적용 */

② 트랜지션의 진행 시간을 지정하는 transition-duration 속성

transition-duration: <시간>

• 시간 : 지정할 수 있는 단위는 초(second) 또는 밀리초(millisecond). 트랜지션의 대상 속성이 여러 개라면 진행 시간도 쉼표(,)로 구분해서 여러 개를 지정할 수 있음. 음수값을 지정하면 0으로 간주함.

다음은 요소의 너비와 높이에 트랜지션의 진행 시간을 다르게 지정한 예제 소스임.

  .box {
      width: 50px; height: 50px;
      background-color: blue;
      transition-property: width, height;  /* 트랜지션 대상 - 너비, 높이 */
      transition-duration: 2s, 1s;  /* 트랜지션 시간 - 2초, 1초 */
  }
  .box:hover {
      width: 200px; 
      height: 120px; 
  }

③ 트랜지션의 속도 곡선을 지정하는 transition-timing-function 속성

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)

• ease : 처음에는 천천히 시작하고 점점 빨라지다가 마지막엔 천천히 끝냄. 기본값
• linear : 시작부터 끝까지 똑같은 속도로 진행
• ease-in : 느리게 시작
• ease-out : 느리게 끝남
• ease-in-out : 느리게 시작하고 느리게 끝남
• cubic-bezier(n,n,n,n) : 배지에 함수를 정의해서 사용. 이때 n값은 0~1사이만 사용할 수 있음.

  <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 .ease {
      transition: 3s ease;
    }
    #ex .linear{
      transition:3s linear;
    }
    #ex .ease-in{
      transition:3s ease-in;
    }
    #ex .ease-out{
      transition:3s ease-out;
    }
    #ex .ease-in-out{
      transition:3s ease-in-out;
    }
  </style>

④ 트랜지션의 지연 시간을 설정하는 transition-delay 속성

transition-delay: <시간>

• 트랜지션 효과를 언제부터 시작할 것인지 설정함. 이 속성을 사용하면 지정한 시간만큼 기다렸다가 트랜지션이 시작됨. 사용할 수 있는 값은 초(s)나 밀리초(ms)이며, 기본값은 0임.

⑤ 트랜지션의 속성을 한꺼번에 표기하는 transition 속성

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