[CSS] transition

🔗 CSS에서 transition이란?

 

 애니메이션 속도를 조절하는 CSS 속성이다.

 

---

 

transition-property : transition 적용할 속성들 나열

 

transition-property: width, background-color;

=> width, background-color만 transition 적용되고, 나머지는 그대로

 

transition-duration : transition 지속 시간 (몇 초 동안)

 

transition-delay : transition 딜레이 시간 (몇 초 뒤에)

 

transition-timing-fuction : transition 가속도

· linear  default

· ease : 빠 -> 느 (ease-out 보다 빠른 속도로 시작)

· ease-in : 느 -> 빠

· ease-out : 빠 -> 느

· east-in-out : 느 -> 빠 -> 느

 

▪ transition shorthand

transition: transform duration timing-fuction;

 

 

---

💡 같이 보면 좋을 Post

[CSS] 왕초보를 위한 font / background / border 속성 총정리

[CSS] animation