[CSS] 카카오톡 이모티콘샵 좋아요 인터랙션

카카오톡 웹 이모티콘 샵을 구경하다가 마음에 드는 이모티콘을 찜(하트/좋아요) 했는데, 인터렉션이 너무 귀여워서 소스를 까보았다. 애니메이션 스텝을 하나하나 그린 파일을 넘겨서 보여주는 방식이었다. 디자이너님의 노고가 느껴졌다. 그만큼 결과물이 예쁜 것 같다.

좋아요 (웃으며 빨간색이 차오르는 하트)

좋아요 해제 (눈물흘리며 색이 빠지는 하트)

이런식으로 가로길이 약 18,000px의 이미지...!

See the Pen kakao heart animation by zinee (@zineeworld) on CodePen.