갑자기 마주친 svg, css animation

디자인 영역이라고 생각했던 css로 애니메이션 구현하기

생각해보면 프론트 개발의 영역에도 충분히 걸쳐있다.

해야되니까 배웠다.

 

일단은, svg 좌표(?)로 원하는 형태의 아이콘을 그린다

svg가 무엇인지, 왜 좋은지는 아래 블로그에서 배웠다

ldrerin.tistory.com/398

SVG에 대한 완벽한 가이드

나는 원안에 그림이 있는 형태로, 이미지를 겹쳐야 했기 때문에 아래 블로그에서 viewBox개념을 학습해야 했다!

ryujek.tistory.com/entry/viewBox

viewBox

svg의 사이즈와 비율은 여러가지 공식으로 정해지는데, 짧게 말하면 큰 원에 작은 아이콘을 정중앙에 배치하기 원해서 큰 원의 중심을 조금 옮겨줬다.

 

애니메이션 만드는건 의외로 예전에 유튜브 한다고 까불면서 FinalCut Pro 만져본게 도움이 됐다.

@keyframe, transform, transition 등의 개념이 어렵게 느껴지진 않았다.

기본적으로 애니메이션은 object의 위치를 규칙적으로 옮기는건데 여기에 속도 효과등을 붙인다고 생각하믄 되므로...!