[CSS] 트랜지션(Transition) 공부해서 잘 사용하자!!🖌️

저는 얼마 전 여러 강의를 보다가 우연히 트랜지션이라는 것을 접하게 되었습니다 부드럽게 움직이는 요소들을 보고 아!! 나도 저렇게 부드러운 움직임 구현해보고 싶다! 라는 생각이 들어서 공부를 해보려고 이렇게 글을 쓰게 되었습니다!

---

❓ 트랜지션(transition) 그게 뭘까?

CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다

속성

• transition-property: 원하는 애니메이션 속성(color, border-radius, postion)
• transition-duration: 애니메이션 효과가 실행되는 시간(ms, s)
• transition-timingfunction: 애니메이션이 적용되는 속도(linear, ease(기본값), ease-in, ease-out, ease-in-out)
• transition-delay: 애니메이션이 시작하는 딜레이 기간

transition-propery(opacity) 예시

See the Pen property by bae080311 (@bae080311) on CodePen.

transition-duration 예시

See the Pen Untitled by bae080311 (@bae080311) on CodePen.

transition-timingfunction 예시

See the Pen Untitled by bae080311 (@bae080311) on CodePen.

transition-delay 예시

See the Pen Untitled by bae080311 (@bae080311) on CodePen.

---

글을 마치며

이렇게 우리의 작품들을 한층 더 아름답게 해줄 트랜지션(transition)에 대해서 알아보았습니다 이걸 잘 이용해서 센스 있고 예쁜 작품을 만드시길 바랍니다!!