css transition 전환 속성

✏ transition 

 transition는 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성이다.

 transition는 속성명 property + 지속시간 duration + 타이밍 함수 timing-function + 대기시간 delay;

으로 구성되며 축형으로 작성 시 지속시간은 꼭 작성해야 한다.

 

 

1. property

 

전환효과를 사용할 속성 이름을 지정하는 속성이다. 기본적으로는 all으로 기본 값으로 지정되어 있으며,

필요한 따라 정확한 특정 속성을 명시하고 싶을 때 상용한다. ( width, height ... )

transition: width;

 

2. duration

 

전환효과의 시속 시간(s)을 지정해주는 속성이다. 기본적으로는 0s로 기본값으로 지정되어 있으며,

만약 0.5s 같은 1보다 작은 수를 나타날 때는소수점 단위의 0을 생략하고.  .5s..3s으로 입력하면 된다.  

transition: width .5s;

 

3. timing-function

전환 효과의 타이밍(easing) 함수 지정해주는 속성이다. 

• ease : 느리게 - 빠르게 - 느리게
• linear : 일정하게 
• ease in : 느리게 - 빠르게
• ease out : 빠르게 - 느리게
• ease-in-out : 느리게 - 빠르게 - 느리게

---

 다양한 timing-function에 대해서 자세하게 동작에 대해 알고 싶다면 아래에 있는 사이트를 찾아가 보자!!

 

👇 easing functions mdn  https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function

<easing-function> - CSS: Cascading Style Sheets | MDN

👇 easing functions    https://easings.net/ko

Easing Functions Cheat Sheet

👇 tweenmax easing    https://greensock.com/docs/v2/Easing

Docs

---

3. delay

 

전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정하는 속성이다. 기본적으로 대기시간이 없는  0s으로 기본값이 지정되어 있으며 원하는 지속시간으로 단위 (s)로 입력하면 된다.

 

 

✏ active와 hover

 

주로 사용하는 가상 선택자인 active와 hover이다.

active는 클릭 시 효과가 전환이 구동이 되는 선택 자이며,  hover 마우스 커서를 올렸을 시  전환이 구동이 되는 선택 자이다.

active

hover

---

( ᵔᵒᵔ )ᵍᵒᵒᵈᵎᵎ  감사합니다!