CSS transition

 # transition 

---

 # transition-duration 

정의(Define)

transition이 지속되는 시간을 지정한다.

문법(Syntax)

transition-duration: [number] [단위];

예시(Sample)

See the Pen CSS transition-duration by Char1ey (@char1ey95) on CodePen.

---

 # transition-delay 

정의(Define)

transition이 시작되는 시간을 연기해준다.

문법(Syntax)

transition-duration: [number] [단위];

예시(Sample)

See the Pen CSS transition-delay by Char1ey (@char1ey95) on CodePen.

---

 # transition-timing-function 

정의(Define)

transition의 가속도를 설정한다.

문법(Syntax)

transition-duration: ease-in-out;
transition-duration: cubic-bezier(a, b, c, d);

예시(Sample)

See the Pen CSS transition-timing-function by Char1ey (@char1ey95) on CodePen.

---

Tip

1. 일반적으로 다음과 같은 형태로 많이 사용한다.

transition: all [number 단위];

ex) transition: all 2s;

 

2. transition에는 한 가지 선택사항이 있는데, hover와 같은 상태(:)에 줄건지, 원본에 줄 건지 선택이 가능하다.

원본에 주게 되면 뚝뚝 끊기지 않고, 자연스럽게 효과가 들어가게된다. :hover에 transition을 줬을 경우는 마우스를 올렸을 때만 작동하는 반면, 원본에 transition을 주면 올릴때와 내릴때 작동되기 때문에 적절한 상황에 맞게 쓰는 것이 좋다.

예시(Sample)

See the Pen CSS transition-duration_original by Char1ey (@char1ey95) on CodePen.