CSS속성 transition 시간에 따른 속성 적용

<Today's Goals>

• transition-delay
• transition-duration
• transition-property
• transition-timing-function 

<What i learned>

• transition-timing-function 을 이용해서 자연스럽게 효과를 줄 수 있다. ease-in-out

 

---

transition이란?

시간에 따라 웹 요소의 스타일 속성이 변함

• transition : transition 속성을 한번에 설정
• transition-delay: 트랜지션 지연 시간 설정
• transition-duration : 트랜지션 진행 시간 설정 / [시간]
• transition-property : 트랜지션 대상을 설정 / [all], [none], [속성 이름]

 

• transition-timing-function : 트랜지션 속도 곡선을 설정

속도 곡선 종류

• linear : 시작에서 끝까지 똑같은 속도로 진행
• ease : 처음에는 천천히 시작하고 점점 빨라지다가 마지막엔 천천히 끝남
• ease-in : 시작을 느리게
• ease-out : 느리게 끝남
• ease-in-out : 느리게 시작하고 느리게 끝남
• cubic-bezier (n,n,n,n) : 직접 베이직 함수를 정의해서 사용. n 사용할 수 있는 값은 0~1사이입니다.

transition-delay: 0s;
transition-duration: 0.7s;
transition-property: all;
transition-timing-function: ease-in-out;