CSS) Transition, Transform, Animation (+ Aminista 사용법)

요소들을 움직이고 변형시키고 애니메이션을 만드는 방법에 대해 정리한다.

 

Transition과 Transformation은 State 와 엮어서, 특정 상태에서만 나타나게 하는 방식으로 쓰인다.

예를 들면, 마우스를 올려 놨을 때 한 바퀴 돌아간다든지 등이 있다.

 

Animaition은 State와 관계 없이 지정한 시간 또는 계속해서 Transition과 Transformation을 적용시키는 방식이다.

---

1) Transition

 

 

/* transition: <property name> <duration> <timing function> <delay> */

transition: margin-left 4s ease-in-out 1s;

property name에는 background-color, margin, border 등의 다양한 특성들이 들어갈 수 있다. 변화시키고 싶은 모든 대상들을 넣으면 된다.

 

Transform 또한 Transition의 대상이 될 수 있다!

 

예시는 이미지로 담을 수 없어서 스킵한다.

 

 

유용한 사이트: https://matthewlein.com/tools/ceaser

Ceaser - CSS Easing Animation Tool - Matthew Lein

위 사이트는 ease-in-out 등의 time-function 이외에도 여러 변화들을 커스텀하거나 커스텀된 항목들을 사용할 수 있다.

 

---

2) Transform

 

Transform은 기존 요소를 변형시키는 것이 아닌, 새롭게 변형 특성을 적용해야 한다.

 

 

그 예시로는 matrix, rotate, translate, scale 등이 있다. 종류가 많기 때문에 직접 하나씩 찾아보며

본인에게 필요한 함수를 찾아야 한다.

 

 

유용한 사이트: https://developer.mozilla.org/ko/docs/Web/CSS/transform-function

<transform-function> - CSS: Cascading Style Sheets | MDN

 

위 사이트는 다양한 transform-function이 있다. 본인에게 맞는 걸 찾자.

---

3) Animation

 

Animation은 일부 Transform 특성을 포함하여 아주 다양한 특성들이 있다.

 

다양한 특성들을 이용하여 Animation을 적용하는 두 가지 방법이 있다.

(더 있는 것 같은데, 기초적인 사용법만 소개한다.)

 

 

1. from to 방식

 

 

2. percent(%) 방식

 

 

%를 활용하여 진행 정도에 따라 특성을 부여할 수 있다.

 

 

 

더욱 다양한 특성들과 활용 방법이 궁금하시다면, 아래 참고 URL의 Animation MDN 사이트에서 확인하면 된다.

 

 

 

유용한 사이트: https://animista.net/

Animista - CSS Animations on Demand

위 사이트는 다양한 Animations 특성들을 사용할 수 있도록 한다.

 

 

---

+ Animista 활용 방법:

 

원하는 애니메이션과 좌측의 옵션을 선택하고, 우측의 코드 생성 버튼을 누른다.

 

 

 

class와 keyframes를 복사하여 css파일에 붙여넣는다.

 

 

해당 애니메이션에 맞게 html과 css 코드를 커스텀한다.

---

참고)

 

https://nomadcoders.co/kokoa-clone/lectures/1731

 

https://developer.mozilla.org/ko/docs/Web/CSS/transition

 

https://developer.mozilla.org/ko/docs/Web/CSS/transform

 

https://developer.mozilla.org/ko/docs/Web/CSS/animation