CSS - transition

transition :       속성명                지속시간                   타이밍 함수                대기시간

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

                                                ↑지속시간: 단축형으로 작성할 때 필수 포함 속성

 -> 요소의 전환(시간과 끝) 효과를 지정하는 단축 속성

 

transition-property  -  전환 효과를 사용할 속성 이름을 지정

• all              모든 속성에 적용(기본값)
• 속성 이름     전환 효과를 사용할 속성 이름 명시  ex) width, color 등

 

trasition-duration 전환 효과의 지속시간을 지정

• 0s        전환효과 없음
• 시간     지속시간을(s)를 지정

 

transition-timing-function - 전환효과의 타이밍(Easing) 함수를 지정

• ease            느리게-빠르게-느리게(기본값)
• liner            일정하게
• ease-in         느리게-빠르게
• ease-out       빠르게-느리게
• ease-in-out   느리게-빠르게-느리게

 

참고 사이트 

https://easings.net/ko

Easing Functions Cheat Sheet

 

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

transition-timing-function - CSS: Cascading Style Sheets | MDN

google에 tweenmax easing 검색해서 보기

 

 

transition-delay 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정

• 0s          대기시간 없음
• 시간       대기시간(s)을 지정