CSS 속성 알아보기 (전환)

 

transition

 

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

transition: width .5s;                      /* 속성명 지속시간 */
transition: width .5s, background-color 2s; /* 속성명 지속시간 2개 */
transition: 1s .5s;                         /* 지속시간 대기시간 */

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

 

속성명(transition-property)

지속시간(transition-duration) - 단축형으로 작성할 때 필수 포함 속성!

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

대기시간(transition-delay)

 

transition-property

 

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

 

기본값(all) - 모든 속성에 적용

속성이름 - 전환 효과를 사용할 속성 이름 명시, ex) width

 

transition-duration

 

전환 효과의 지속시간을 지정

 

기본값(0s) - 전환 효과 없음

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

 

transition-timing-function

 

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

 

기본값(ease) - 느리게->빠르게->느리게, cubic-bezier(0.25, 0.1, 0.25, 1)

linear - 일정하게, cubic-bezier(0, 0, 1, 1)

ease-in - 느리게->빠르게, cubic-bezier(0.42, 0, 1, 1)

ease-out - 빠르게->느리게, cubic-bezier(0, 0, 0.58, 1)

ease-in-out - 느리게->빠르게->느리게, cubic-bezier(0.42, 0, 0.58, 1)

cubic-bezier(n,n,n,n) - 자신만의 값을 정의(0~1)

 

transition-delay

 

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

 

기본값(0s) - 대기시간 없음

시간 - 대기시간(s)을 지정