Transition

CSS Transition 속성은 A라는 상태가 B라는 상태로 변경될 때 변경되는 동안의 스타일을 설정할 때 사용하는 속성입니다.

transtion

• CSS 속성의 전환 효과를 지정하는 속성입니다(단축 속성).

• 값	의미	기본값
  transition-property	전환 효과를 사용할 속성 이름	all
  transition-duration	전환 효과의 지속 시간	0s
  transition-timing-function	타이밍 함수를 지정	ease
  transition-delay	전환 효과의 대기 시간을 설정	0s

• 만약 시간을 의미하는 값이 하나만 존재하는 경우 그 값은 transition-duration 속성의 값으로 사용됩니다

• 시간을 의미하는 값이 두 개 존재하는 경우 첫 번째 시간값은 transition-duration, 두 번째 시간값은 transition-delay 속성값으로 사용됩니다.

• CSS 속성 값이 변경되는 시작 지점과 끝 지점 사이에 전환 효과를 적용하는 속성입니다.

• 일반적으로 시작 지점, 즉 변경되기 전 상태에 transition 속성을 작성합니다.

---

.start { /* 변경의 시작 지점 */
    width: 300px;
    height: 300px;
    background-color: red;
    
    transition: all 2500ms ease-in;
    /*
      transition-property: all;
      transition-duration: 2500ms;
      transition-timing-function: ease-in;
      transition-delay: 0s;
    */
}

.start:hover { /* 변경의 끝 지점*/
    width: 500px;
    height: 500px;
    background-color: blue;
}

위 예제는 start라는 클래스를 가진 요소에 마우스 커서를 올려두면 width, height, background-color 속성이 2.5초 동안 ease-in 전환 효과를 사용하여 width와 height 속성의 값은 300px에서 500px로, background-color 속성의 값은 red에서 blue로 변경이 됩니다.

만약 .star:hover에 transtion 속성을 작성했다면 커서를 올리면 transition이 적용되지만 커서를 내리는 순간에는 transition이 적용되지 않습니다.

이는 :hover 가상 클래스 선택자는 커서를 내리는 순간 제외되기 때문에 커서를 내리는 순가 transition이 적용되지 않습니다.

transition-property

• 전환 효과를 사용할 CSS 속성의 이름을 작성하는 속성입니다.

• 값	의미	기본값
  all	요소의 모든 속성을 선택	all
  속성 이름	전환 효과를 사용할 속성의 이름

• 기본값은 all로 되어 있으며 모든 속성이 전환 효과에 적용이 되도록 설정되어 있습니다.

• 쉼표로 구분하여 여러 개 속성을 작성할 수 있습니다.

transition-durtion

• 전환 효과의 지속 시간을 설정하는 속성입니다. 즉, transition-property 속성으로 지정된 CSS 속성값이 변경되는 시간을 설정하는 속성입니다.

• 값	의미	기본값
  시간	전환 효과가 지속되는 시간(초, 밀리초)	0s, 0ms

• 시간 값을 작성할 때는 ms와 s 단위를 사용할 수 있습니다.
  1s === 1,000ms 입니다.

• 기본값은 0s, 0ms로 CSS 속성값이 변경되는 시간이 따로 없고 즉각적으로 변경되지만, transition-duration 속성을 사용하면 CSS 속성값이 변경되는 시간을 지정하여 전환효과를 사용할 수 있습니다.

transition-timing-function

• 전환 효과를 계산하는 방법을 지정하는 속성입니다.

• 타이밍 함수란 전환 효가가 빠르게 진행되다 느리게 끝날 것인지, 천천히 진행되다 빠르게 끝날 것인지 등 애니메이션을 설정해주는 속성입니다.

• 값	의미	기본값
  ease	빠르게 -> 느리게	ease
  ease-in	느리게 -> 빠르게
  ease-out	빠르게 -> 느리게
  ease-in-out	느리게 -> 빠르게 -> 느리게
  linear	일정하게
  step(n)	n번 분할된 애니메이션
  cubic-bezier()

transition-delay

• 전환 효가가 몇 초뒤에 시작할지 대기 시간을 설정하는 속성입니다.

• 값	의미	기본값
  시간	전환 효과의 대기 시간을 설정(초, 밀리초)	0s, 0ms