CSS 속성(Properties) - 전환

전환

요소의 전 상태와 후 상태의 중간 단계를 자연스럽게 만들어 주는 것

 

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

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

 

📍 개별 속성

transition-property(속성명)

• 전환 효과를 사용할 속성 이름을 지정
• 값
  • all [기본 값] : 모든 속성에 적용
  • 속성 이름: 전환 효과를 사용할 속성 이름 명시

transition: width 1s; /* 가로 너비 전환에만 적용 */

 

transition-duration(지속시간)

• 전환 효과의 지속 시간을 지정
• 값
  • 0s [기본 값] : 전환 효과 없음
  • 시간: 지속 시간(s)을 지정

transition: 
	width .5s, /* 가로 너비가 0.5초만에 전환 */
	background-color 2s; /* 배경 색상이 2초만에 전환 */

 

transition-timing-function(타이밍함수)

• 전환 효과의 타이밍(Easing) 함수를 지정
• 값
  • ease [기본 값] : 느리게 - 빠르게 - 느리게
  • linear: 일정하게
  • ease-in: 느리게 - 빠르게
  • ease-out: 빠르게 - 느리게
  • ease-in-out: 느리게 - 빠르게 - 느리게

 

transition-delay(대기시간)

• 전환 효과가 몇 초 뒤에 시작할 지 대기 시간을 지정
• 값
  • 0s [기본 값] : 대기 시간 없음
  • 시간: 대기 시간(s)을 지정

transition: 1s .5s; /* 시간이 2개 명시되면 뒷 시간이 대기 시간*/

---

※ 패스트캠퍼스 FE 프로젝트십 과정 중 강의를 듣고 정리한 내용입니다.