21. Transitions (1)

<transition>

어떤 상태에서 다른 상태로의 "변화"를 애니메이션으로 만드는 방법

transition이라는 속성은 state가 없는 요소에 붙어야 함

가장 처음 생겨난 기본 위치 (root)인 element에 있어야 함

 

 

 

1) 버튼 만들기

버튼을 만든 모습

누르면 #이라는 곳으로 연결되는 GO버튼을 만들어줌.

글자의 색은 흰색이고 배경은 골드색으로,

밑줄을 없애고 패딩과 보더에 스타일을 함.

 

 

 

 

2) transition 적용하기

버튼에 마우스 커서를 올리면 스타일이 변하게 만듬

hover을 사용하여 마우스 커서를 버튼에 올리면 스타일이 변하게 만듬.

스타일이 자연스럽게 변하는 것이 아닌 갑작스럽게 변함.

 

transition을 사용하여 변화에 애니메이션을 주자.

 

 

버튼의 스타일이 좀 더 부드러워짐

transition: background-color 2s ease-in-out; 을 하여

배경을 2초동안 사라지고 나타나도록 설정함.

 

 

transition을 사용하여 변화에 애니메이션을 줌.

transition은 변화하는 상태인 hover에 적는 것이 아님.

가장 기본의 state에 적어야 함.

 

 

 

3) 두 개의 transition 적용하기

두 개의 transition이 적용됨

transition: background-color 3s ease-in-out, color 1s ase-in-out; 을 하여

배경은 3초동안 글자색은 1초동안 변하도록 설정함.

 

 

이때 transition은 hover에서 변화하는 것에만 적용할 수 있음.

 

 

 

4) 전체에 transition 적용하기

변화하는 모든 스타일에 transition을 적용함

transition: all 1s ease-in-out; 을 하여

변화하는 모든 스타일이 1초동안 변하도록 설정함.

 

all을 사용하면 변화하는 모든 것에 같은 효과를 적용할 수 있음.

 

 

transition은 color 뿐 아니라 boder, padding 등 다른 태그에도 사용 가능하고

hover 뿐 아니라 focus, active 등 다른 state에도 사용 가능함.