[HTML&CSS] Transition , Easing Function, Transformations

 

 

 

 

 

[HTML&CSS] Transition , Easing Function, Transformations

( UPDATE 2023 - 05 - 31 )

 

 

 

---

Transition

---

 

 

 

transition

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

 

 

 

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

만약 state 자체에 transition을 준다면

변화를 준 상태(예를들면 hover)를 그만 두었을 때, 바로 변화 이전의 상태로 돌아간다.

 

rule2> transtion은 state가 기준이 되어 바뀌는 것이다.

상태가 바뀌는 요소가 있을 때 transition이 가능하다.

예시) hover, active, focus ...

 

 

 

 

 

---

Easing Function

---

 

Easing Function

브라우저에게 변화하는 방법을 알려주는 역할

 

 

 

 

 

easing-function 참고 사이트

클릭

 

 

 

 

linear

변화 그래프가 직선이다.

 

 

 

 

ease-in

시작과 끝이 빠르다.

 

 

 

 

ease-out

시작과 끝이 느리다.

 

 

 

 

ease-in-out

시작이 빠르고 끝이 느리다.

 

 

 

 

all

변화 요소를 한번에 다룬다.

따로 다루고 싶으면 각각 써주면 된다.

 

 

 

 

cubic-bezier(0, 0, 0, 0);

직접 설정할수도 있다.

 

 

 

 

 

 

 

---

Transformations

---

 

 

Transformations

transformation은 한 요소를 transform(변형)시킬 수 있다.

 

border-radius에 50%를 준다면 원이 된다.

 

translate은 transformation을 적용 시키긴 하지만, 다른 형제(sibling)을 변화시키진 않는다.

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

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

→ margin, padding을 위해서 translateX, translateY를 사용하지 않는다.

 

transform과 transition을 조합하면 더 역동적인 애니메이션을 만들 수 있다.

 

CSS 3D는 GPU로 돌아가므로, 3D 작업을 할 수 있다.

 

 

 

transform fuction 참고 사이트

클릭

 

 

 

---

출처

---

 

노마드 코더 코코아톡 클론코딩

 

 

easing-function 참고사이트

 

 

transform fuction 참고 사이트