Transition

transition: A가 B로 바뀔 때, A의 CSS가 B의 CSS로 바뀌는 것.

Transition-property

어떤 요소에 변화를 줄건지 결정한다.

transition-property: none; : 아무것도 변경하지 않겠다.
transition-property: all; : 모두 변경하겠다.
transition-property: margin-right; : margin-right에 변화를 주겠다.

---

transition-duration

얼만동안 변화를 줄 것인지 결정한다.

transition-duration: 2s;
transition-property: background-color;

=> background-color를 2초간 보겠다.

---

마우스 호버 했을 때 변화 주기

일단, 마우스 호버 할 박스를 만들어 준다.
[html]

<div class="box">
hover me!
</div>

[css]

.box {
width: 300px;
height: 80px;
border: 2px dashed teal;
background-color: darkslategray;
font-size: 50px;
color: white;
}

그 다음, hover라는 pseudo class selector를 넣어서 어떻게 변화를 줄지 알려준다.

.box:hover {
width: 320px;
background-color: indianred;
color: black;
font-size: 60px;
}

마지막으로, .box에 transition 정보를 넣어준다.

transition-property: all;
transition-duration: 1s;

❗️.box가 아닌 아래의 .box:hover에 transition 정보를 넣게되면, 호버 했다가 뗄 때는 transition 적용이 안돼서 뚝 끊기게 된다.

---

transition-delay

transition에 delay를 걸어서 설정한 시간만큼 늦게 변화가 나타나게한다.

transition-delay: 1s;

😮 요소가 여러개 있을 때 딜레이 시간을 다르게 줘서 (1s, 2s, 3s) 차례대로 변하게 만들 수도 있다.

---

transition-timing-function

• ease: 빠르게 시작했다가 뒤에서 느려짐 (default value)
• ease-in: 천천히 가다가 transition이 끝날 때 까지 빨라진다.
• ease-out: 빠르게 시작했다가 transition이 진행되는 동안 느려진다.
• ease-in-out: 천천히 시작했다가 빨라졌다가 다시 느려진다.
• linear: 일정한 속도로 간다
• cubic-bezier(0.2-2,0.8,2): 곡선을 직접 입력할 수 있는 함수

---

transition (shorthand)

한 줄로도 적을 수 있는데, 순서는

property - duration - timing-function - delay 순으로 적는게 좋다.
ex) transition: all 3s ease-in-out 1s;