transition

• 요소의 전환(시작)과 (끝)효과를 자연스럽게 이어주는 속성

transition: 속성명 지속시간 타이밍함수 대기시간;

**** 지속시간은 필수 포함 속성!

---

• transition-property
  전환 효과를 사용할 속성 이름을 지정 :

기본값	전환 효과를 사용할 속성 이름 명시
all	속성이름

---

• transition-duration
  (필수) 전환 효과의 지속시간을 지정

기본값	지속시간(s)지정
0s	시간

속성 별로 지속시간 지정시
속성 시간, 속성 시간; 형태로 입력한다.

---

• transition-timing-function
  전환 효과의 타이밍(Easing) 함수를 지정

함수명	효과
ease	느리게 - 빠르게 - 느리게
linear	일정하게
ease-in	느리게 - 빠르게
ease-out	느빠르게 - 느리게
ease-out	빠르게 - 느리게

*** Easing함수 참고할만한 사이트

https://easings.net/ko
여러 함수의 그래프와 효과를 한눈에 확인 가능

https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function
모질라 재단에서 운영하는 홈페이지. Easing함수에 대한 설명이 나와있음

https://greensock.com/docs/v2/Easing
여러 함수의 그래프와 효과를 시각적으로 확인 가능하고 custom을 통해 원하는 효과를 제작가능

---

• transition-delay
  전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정

기본값	대기시간(s)지정
0s	시간

단축속성으로 입력할 때 지속시간 뒤에 띄어쓰기로 구분해서 작성해주면 된다.
ex) transition: 1s .5s;

---

출처 - 이 포스트는 패스트 캠퍼스의 강의를 참고하여 작성하였습니다.