css transition

transition: 요소의 속성 값을 변경해줄때 사용한다. 구체적으로는 애니메이션을 줘서 자연스럽게 변화 할 수 있게 도와주는 역할을 한다.

property, duration, [time-function], [delay] 4가지 요소를 사용
참고로 time-function, delay는 생략이 가능하다

• property: 변화를 일으킬 css 속성을 지정
• duration: 변화가 일어나는 지속 시간 (ms, s)
• time-function: ease-in, ease-out, ease-in-out, cubic-bezier()
  • ease-in: 천천히 바뀌다가 갑자기 휙 바뀜
  • ease-out: 확 바뀌다가 천천히 바뀜
  • ease-in-out: 위에 2개 합친거
  • cubic-bezier : 가속도 조절
• delay: transition이 몇초 후에 일어났으면 좋겠다 싶을 때 사용

• transition: font-size 2500ms;: 폰트 사이즈를 변경시킬때 2.5초에 걸쳐서 천천히 변화시킨다.
• transition: all ...: 모든 변화에 애니메이션을 줄때는 all을 쓰면 된다.
• transition: all 2500ms ease-in;: 모든 변화에 애니메이션을 2.5초에 걸쳐서 ease-in 시간 함수를 적용해라.
• transition: all 2500ms cubic-bezier(0.82, 0.05, 0.96, 0.06);: cubic-bezier 는 가속도 조절 함수로 해당 사이트 참고할 것.
• transition: all 2500ms cubic-bezier(0.82, 0.05, 0.96, 0.06) 1000ms; : 위와 똑같은데 1초후에 변화가 나타난다.

  transition: font-size 1000ms ease-out,
    backgroud-color 2000ms cubic-bezier(0.82, 0.05, 0.96, 0.06);

• 섬세하게 애니메이션을 적용할 경우 위 코드 참고