[CSS] 기본 용어 정리(5)

※transition

. transition-property: transition 효과를 적용할 속성을 정의할 때 사용한다.(적용 가능한 css 속성: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)

. transition-duration: transition 효과가 적용될 시간을 정의할 때 사용한다.(단위는 s/ms이며 기본값은 0s)

. transition-timing-function: transition이 적용되는 시간을 구간별로 세분화하여 fast/slow 효과를 적용할 때 사용한다.(기본 설정값은 ease: start slowly → speed up → slow down, https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function)

. ease-in: 천천히 시작해서 빨라졌다가 갑자기 끝남

. ease-out: 갑자기 시작됐다가 속도를 줄이면서 끝남

. ease-in-out: 천천히 시작해서 빨라졌다가 속도를 줄이면서 끝남

. linear: 일정한 속도로 시작했다가 끝남

. transition-delay: transition 효과가 활성화되기 전의 대기 시간을 정의할 때 사용한다.(단위는 s/ms이며 기본값은 0s)

 a {
  transition-property: background-color;
  transition-duration: 2s;
  transition-timing-function: ease-out;
  transition-delay: 250ms;
}

. transition: transition으로 사용하는 모든 코드를 한 번에지정할 때 사용한다. 모든 속성에 transition 기능을 적용하고 싶다면 transition-property 위치에 "all"을 입력한다.

transition: color 1.5s linear 0.5s;

transition: all 1.5s linear 0.5s;

. transition combination: transition 기능을 중첩하여 여러개 사용하고 싶을 때 transition 코드에서는 ","로 구분하여 입력하고 ";"으로 닫아주면 된다

transition: color 1s linear,
font-size 750ms ease-in 100ms;