[CSS] transition

어떤 요소를 A라는 상태에서 B라는 상태로 어느 정도 시간차를 두고 애니메이션과 같이 변하게 할 수 있는데 transition이라는 속성을 이용해서 이러한 효과를 보여줄 수 있습니다.
버튼에 마우스를 올렸을 때 색상이 서서히 Fade in 되면서 바뀌는 효과를 주고 싶을 때 등에 사용할 수 있습니다.

transition-property, transition-property

<div class="box">
  Hover Me!
</div>

.box {
  width: 300px;
  height: 80px;
  border: 2px dashed teal;
  background-color: gray;
  font-size: 50px;
  color: white;
  
  /*
  transition 속성을 :hover에 넣게될 경우,
  요소에 마우스를 올릴 때는 제대로 transition이 적용되지만
  요소에서 마우스가 빠져나올 때는 transition이 적용되지 않습니다.
  */
  transition-property: all;
  transition-duration: 0.5s;
}

.box:hover {
  width: 340px;
  background-color: indianred;
  color: black;
  font-size: 60px;
}

transition-property

어떤 속성을 transition에 적용할지 선택하는 속성입니다.
transition-property에 선택되지 않은 속성은 한순간에 변하게 되고,
transition-property에 선택된 속성만 시간차를 두고 천천히 변하게 됩니다.

transition-property: margin-right, color;

transition-duration

변화시킬 속성의 시간차를 설정해줄 수 있는 속성입니다. 값으로 time을 갖게 되며 단위는 s, ms가 있습니다.

transtition-duration: 500ms;
transtition-duration: 2s;

/* margin-right는 3s color는 1s ! */
transition-duration: 3s, 1s;
transition-property: margin-right, color;

• time 자료형
  animation이나 transition에 적용할 수 있는 속성입니다.
  단위는 ms, s가 있습니다. (1000ms===1s)

transition-delay

transition-delay는 transition이 동작하기 까지 기다려야 하는 시간을 지정할 수 있는 속성입니다.
시간을 지정하는 것이므로 값으로 time을 갖게 됩니다. (s, ms)

transition-timing-function

transition은 A상태에서 B상태로 변하는 것을 시간을 지정해서 애니메이션처럼 보여주는 속성인데 전체적으로 변하는 시간을 똑같이 적용하거나 스텝을 적용해서 끊어지게 보여주는 것도 가능합니다.
초기값은 linear로 일정한 속도로 변하게 됩니다.
cubic-bezier라는 값을 설정해서 줄어들었다 늘어났다 하는 것도 가능합니다.

transition(short)

transition-property, transition-duration, transition-delay, transition-timing-function을 한번에 설정할 수 있는 shorthand입니다.

• 값의 순서는 property, duration, delay, timing-function의 순서대로 작성하는 것이 좋습니다.
• 시간의 경우 하나만 있을 경우 duration으로 동작하고 두개가 있을 경우 duration, delay의 순서대로 적용됩니다.

/* property-name | duration */
transition: margin-left 4s;
/* property-name | duration | delay */
transition: margin-left 4s 1s;
/* property-name | duration | timing-function | delay */
transition: margin-left 4s ease-in-out 1s;
/* Apply to 2 properties */
transition: margin-left 4s, color 1s;
/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: unset;

transition + transform 예시

transform은 요소의 크기, 기울임, 위치 변경이 가능하고 transition은 애니메이션처럼 시간을 두고 A상태에서 B상태로 바꾸는 것이 가능합니다.

<div class="box">
  Hover Me!
</div>

.box {
  width: 100px;
  height: 100px;
  border: 10px solid seagreen;
  background-color: rgb(204, 253, 225);
  border-radius: 30px
  
  transform-origin: bottom right;
  transition: all 1s ease-in-out;
}

.box:hover {
  transform: rotate(360deg);
}