CSS3 transition (학습 29일차 TIL)

210719 오늘은 animation 효과를 줄 수 있는 transition에 대해서 학습했다.

CSS tips

• transition은 원본에 줄 것.
  • property - 모든 속성 or 일부 속성에 animation적용(all, background, color, height, width, transform)
  • duration - 시작해서 끝날 때까지 시간, 초 단위
  • timingfunction - ease, linear 길이 증가, ease-in 가속, ease-out 감속, ease-in-out, cubic-beizer 베이지어 곡선 등 중에서 선택
    (linear 일정한 간격, ease 서서히 가속&마지막 급격히 감속, ease-in 천천히 시작 마지막 가속, ease-out 최대 속도로 시작하고 마지막에 감속, ease-in-out 0에서 시작하고 중간에서 최고 속도로 마지막에서 서서히 감속, cubic-bezier 직접 값을 입력)