Animation,Transformation, Transition

transition

어떤 상태에서 다른 상태로의 변화! 를 보내주는 애니매이션이다

 

1. transtion은 state가 없는 요소에 붙어야한다

처음 생긴곳에 있어야한다

state에 transition을 준다면 변화를 준것(예를들면 hover라면 마우스를 갖다 댄것)을 그만할경우(마우스를 뗄경우)

원래상태로 바로 돌아간다

 

2. transtion 에 변화를 준것들은 state에 들어있는것들이 기준이 되어 바뀌는것이다

바뀌는 것들에 한정하여 transition 이 일어날 수 있다

트랜지션을 사영하여 표시의 변화를 부드럽기 하기 위해 애니메이션 속도를 조절

transition 은 상태에 따라 바귀는 요소가 있을때 사용한다

상태 ex) hover, active, focus, focus-within...

-ease-in function : 브라우저에게 변화하는 방법을 알려주는 역할

linear - 시작부터 끝까지 일정한 속도

ease-in - 시작과 끝이 빠름

ease-out - 시작과 끝이 느림

ease-in-out - 시작이 빠르고 끝이 느림

-all : 변화 요소를 한번에 다룬다.

- transition을 특정한 요소에 다른 속도로 주고 싶으면 (,)를 통해 따로 따로 transition을 줄 수 있다.

ex)transition : color 1s ease-in-out, border-radius 2s ease-out; 이런식으로

-transition은 root에 들어가야 변화하고 돌아오는 과정을 거친다,

state에 transition을 넣으면 변화를하지만 커서를 내리는 순간 변화는 과정없이 바로 원상태로 상태가 변한다.

-cubic-bezier(0, 0, 0, 0); 으로 직접 설정할수도 있다.

 

https://matthewlein.com/tools/ceaser < 이 사이트를 들어가면 트랜지션 코드를 볼 수 있다! -아래참조-

트랜지션 코드 사이트

-transformation

 

한 요소를 말 그대로 변형시킬수 있기 때문에 유용하게 쓰인다

css로 3D까지 할수 있다!

transform 안에 엄청나게 많은 기능들이 있다

transformation은 box element를 변형시키지 않는다.

즉, 옆에 sibling들에게 영향을 끼치지 않는다.

margin, padding이 적용되지 않는다. 일종의 3D transformation이기 때문이다.

margin이나 padding을 주기위해서 tarnslateX, trnasLateY 를 사용하는것이 아니다!

다른 요소의 box를 변형시키지 않고 원하는 요소를 이동시키기 위해서 사용하는 것이다.

trransformation 은 페이지의 픽셀의 다른 부분에서 일어난다.

transformatino은 box차원에서 일어나지 않는다.

tronsformation 을 결합 가능하다!

CSS의 3D는 GPU로 돌아간다 즉 3D작업을 할 수 있다

transformation 은 이것 역시 엄청나게 많은 document가 있다 확인해서 combine할 수 있다

transition 과 transformation 을 합친다면 아름다운 애니매이션을 만들 수 있다

 

animation

기본적인 애니메이션 코드

@keyframes animationname {

from {

transform: rotatex(0);

}

to {

transform: rotatex(360deg);

}

 

이런 식으로 애니메이션 코드를 작성 한 후 적용을 원하는 대상 요소에서

animation: animationname 5s ease-in-out infinite;를 넣어 실행시킬 수 있다.