CSS-animation

오늘은 토스 웹 페이지의 첫 번째 section 중 최하단에 위치한 화살표 animation을 구현해봤다.
처음에는 animation을 보자 마자 '아,,이건 자바스크립트로 해야겠다.' 생각하고 넘겨버렸다. 하지만 자바스크립트로 나중에 해야지 하고 넘기기엔 찝찝했다.
그래서 css로 animation을 구현할 수 있는 지 찾아보니 역시나 있었다..
css의 끝은 어디인가,,항상 느끼지만 너무 css를 얕게 본 것 같다.

css에서 animation 구현하기.. "@keyframe"

css에서 animation을 구현하기 위해 알아야될 것은 많지만 중요한 것은
@keyframe이였다. @keyframe를 활용해서 animation의 진행 정도마다 위치를 설정하고 투명도나 색상 등 속성을 설정할 수 있었다.
또한 @keyframe을 적용할 class에 animation을 설정하여 유지 시간이나 반복 횟수 등의 속성을 설정하면 끝이다.
어려워 보였지만 해보니 할만했다.

물론 복잡한 animation은 자바스크립트로 구현해야되지만 간단한 animation은 css로 쉽게 구현가능하며 심지어 렌더링 속도도 빠르다.
하지만 간단한 width 값을 늘리는 animation은 css로 구현 시 효과적이지만, 바운스나 일시 중지, 감속과 같은 세밀한 animation은 자바스크립트가 유용하다는 점을 알 수 있었다.

이러한 여러 조건들을 잘 고민해보고 css와 자바스크립트 중 어떤 것으로 구현할 지 정해야한다는 것을 느꼈다.