사용자 행동에 반응하는 전환 효과 만들기

transition속성을 이용해 인터랙션을 구현

• transition 속성은 요소의 속성값이 변경될때 시간을 지정하여 일정시간동안 부드러운 모션처리가능
  
  • transition-property :  CSS속성명 지정 (all을 입려하면 전체 속성 사용가능)
  • transition-duration : 전환 효과가 발생할 때 지속할 시간
  • transition-delay : 전환 효과가 발생할 때 지연할 시간 (지연 시간 이후에 전환 효과가 나타남)
  • transition-timing-function : 전환 효과의 가속도
    • linear : 등속 효과
    • ease : 가속 효과
    • ease-in : 모션 시작시 가속
    • ease-out : 모션 종료시 가속
    • ease-in-out : 모션 시작, 종료시 모두 가속
    • cubic-bezier : 사용자가 지정한 가속 효과 적용
• 모든 전환 효과 관련 속성값을 한꺼번에 축약해서 사용가능!

See the Pen transition by 신범식 (@ulqsqjpw-the-solid) on CodePen.