[CSS]Transition

주어진 기간 동안 속성값을 부드럽게 변경할 수 있도록 해줍니다.

---

예시를 만들 때 영상을 찍어 gif로 만들어서 첨부하면 보시는데 편하시겠지만 시간이 오래 걸리는 관계로 만들지 못했습니다.

Transition 의 프로퍼티 종류

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

---

transition

transition효과를 주기위해서는 두개의 값이 필요합니다.

1. 효과를 주길 원하는 CSS 속성(transition-property)
2. 효과의 지속 시간(transition-duration)

참고: 지속시간의 명확하지 않다면 기본값이 0이 되어 trasition 효과가 발생하지 않습니다.

너비 100px, 높이 100px의 빨간색 박스가 있습니다.

이 빨간색 박스에 transition 속성을 주어 효과를 주도록 하겠습니다.

transition 효과는 효과를 주길 원하는 css속성의 값이 변경될 때 발생합니다.

빨간색 박스에 마우스 커서를 올리면(hover) 2s동안 width가 200px에서 300px로 변경됩니다.

빨간색 박스에서 마우스 커서를 빼면 2s동안 width가 300px에서 200px로 변경됩니다.

---

복수개의 Transition 

transition효과는 한번에 여러 개 추가할 수도 있습니다.

---

transition-timing-function

transition-timing-function 프로퍼티에 나열되는 transition 효과의 속도 곡선입니다.

• ease(기본) : 느림 → 빠름 → 느림
• linear : 쭉 같은 속도
• ease-in : 느린 시작
• ease-out: 느린 끝
• ease-in-out : 시작과 끝을 느리게
• cubic-bezier : 직접 지정

크롬 개발자 도구에서는 위와 같이 보라색 버튼을 클릭해서 두개의 동그란 보라색 공을 당겨가며 속도를 지정할 수 있는 툴을 제공해줍니다.

---

transition-delay

transition 효과를 지연시킵니다.

transition-delay로 지정한 3초 이후에 transition: width 3s;가 동작합니다.

---

Transition + Transformation

앞에서 배운 Transform과 같이 사용할 수 있습니다.

Transform이란 요소를 이동, 회전, 크게, 작게, 비트는 변형입니다.

---

Transition 속성을 한개씩 나열