📌전환

---

Transition

요소의 전환(시작과 끝) 효과를 지정하는 단축 속성

• transition-property 속성명
• transition-duration 지속시간 (필수적 요소)
• transition-timing-function 타이밍함수
• transition-delay 대기시간

Transition-property

전환 효과를 사용할 속성 이름을 지정

• all(기본값)

• 속성 이름
  전환 효과를 사용할 속성 이름 명시
  

  width 조정을 하면 색깔이 자연스럽게 안변하고 달칵! 느낌으로 변하는걸 볼 수 있음!

---

Transition-duration

전환 효과의 지속시간을 지정 (=동작시간 설정)

• 0s(기본값)

• 시간
  지속시간(s)을 지정
  

  여러 효과를 동시에 넣을수도 있지만, ' : ' 을 쓰면 작동이 안되는 점을 주의!

  ---

Transition-timing-function

전환 효과의 타이밍(Easing) 함수를 지정

• ease 느리게 - 빠르게 - 느리게
• linear 일정하게
• ease-in 느리게 - 빠르게
• ease-out 빠르게 - 느리게
• ease-in-out 느리게 - 빠르게 - 느리게
• cubic-bezier(n,n,n,n) 자신만의 값을 정의

그래프 한눈에 보기 좋은 사이트
이징함수 설명 사이트 1
이징함수 설명 사이트 2

---

Transition-delay

전환 효과가 몇 초 뒤에 시작할지 대기시간을 설정

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

transition: 1s .5; (대기시간/복귀시간)