[CSS] transform, transition, animation 속성으로 애니메이션 구현해보기

# 박스로 보는 transform, transition

See the Pen Untitled by jong-jang (@jong-jang) on CodePen.

박스에 마우스 호버시 스케일을 2배커지게 설정해놓았습니다.

 

기본값은 센터기준으로 변형되는 것을 알수있습니다.

기준은 transform-origin이라는 속성으로 변경가능합니다.

 

See the Pen transform2 by jong-jang (@jong-jang) on CodePen.

기준이 left top 기준으로 변경된 모습입니다.

 

transform 만으로 심심하다

그러면 transition 속성을 추가해주면 됩니다.

수치는 모두 transition이 적용되며 색상 또한 가능합니다.

수치가 아닌 값은 적용이 안됩니다.

ex)  width: auto...

 

See the Pen transform3 by jong-jang (@jong-jang) on CodePen.

조금 재미 있어졌습니다.

개발자도구를 열어보면

해당 속성이 어떻게 구성 되어 있는지도 확인 가능합니다.

 

timing-function은 현재 가속도를 표현하며 보라색 표시를 눌러보면

세부 설정이 또 가능합니다.

보라색 원으로 방정식 곡선을 수정할 수 있습니다.

 

# 박스로 보는 animation

# keyframes

See the Pen Untitled by jong-jang (@jong-jang) on CodePen.

애니메이션은 @keyframes 라는 속성을 이용해서 사용합니다.

0% ~ 100% 까지 상태 설정이 가능하며

애니메이션 또한 개발자모드에서 세부 사항을 확인할 수 있습니다.

 

# count, play-state

See the Pen animation2 by jong-jang (@jong-jang) on CodePen.

interation-count를 무한대로도 적용가능하고

play-state를 이용해서 fause도 가능합니다.(마우스 호버시 적용)

 

 

# direction

See the Pen animation3 by jong-jang (@jong-jang) on CodePen.

animation-direction 속성을 alternate로 하면

왔던길을 그대로 돌아가는 것도 가능합니다.

하지만 애니메이션 횟수로 2번으로 적용되므로 2이상을 입력해줘야 합니다.

 

# fill-mode

 

See the Pen animation4 by jong-jang (@jong-jang) on CodePen.

fill-mode를 forwards로 해놓으면

애니메이션 마지막 상태로 유지할 수 있습니다.

 

# frame-by-frame 애니메이션

이미지와 애니메이션의 조합으로

아래와 같은 것도 구현가능합니다.

frame-by-frame 애니메이션 이라고 하더군요