Transition(전환)

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

# 기본 사용법

div {
  transition: 속성명 지속시간(필수) 타이밍함수 대기시간;
}

 

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

• all(default값): 모든 속성에 적용
• 속성이름: 전환 효과를 사용할 속성 이름 명시

# 가로로 늘어나는건 .5초, 배경색 전환은 2초에 걸쳐서 변신하셈

div {
  transition:
    width .5s,
    background-color 2s;
}

 

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

• 0s: 전환 효과 없음
• 시간: 지속시간(s)을 지정

 

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

• ease(default값): 느리게-빠르게-느리게
• linear: 일정하게
• ease-in: 느리게-빠르게
• ease-out: 빠르게-느리게
• ease-in-out: 느리게-빠르게-느리게

 

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

• 0s(default값): 대시시간 없음
• 시간: 대시시간(s)을 지정

# 지속시간은 1초, 대기시간은 .5초 거셈(지속시간을 앞, 대기시간을 뒤에 적는다.)

div {
	transition: 1s .5s;
}