티스토리 좋아요 공감 버튼 두근두근 커지게 하기

티스토리에서 공감 버튼을 '두근두근' 커지게 하는 방법에 대해 안내해 드리려고 합니다~ 수정 결과물은 다음과 같을 것입니다. 어렵지 않으니 원하신다면 천천히 따라해 보세요~

티스토리에는 좋아요 공감 버튼을 통하여 게시물에 추천과 같은 효과를 주는 기능이 있습니다.

해당 기능은 원래 정적으로 가만히 있지만 이번 게시물에서는 심장이 뛰듯이 공감 버튼을 두근두근 커지게 해 보겠습니다.

공감 버튼 요소 검사하기

공감 버튼을 우클릭하여 [검사]를 눌러 주세요. 요소의 아이디나 클래스를 확인할 수 있습니다. 오디세이 스킨을 기준으로 하면 ico_like라는 클래스 이름을 가지고 있습니다.

공감 버튼 HTML 수정하기

클래스 이름을 알았으니 이제 공감버튼을 수정하기 위해 HTML 스킨 편집으로 이동합니다. 편집 화면에서 CSS를 선택하고 다음과 같은 코드를 추가합니다. 코드는 본인의 입맛에 따라 수정해 주세요. 코드는 크게 2가지 부분으로 이루어져 있습니다.

클래스에 애니메이션 추가하기

ico_like 클래스에 애니메이션을 추가합니다. 애니메이션의 이름은 heartbeat로 설정하겠으며, 1초마다 무한반복하도록 진행합니다. CSS에서 점(dot)은 클래스 선택자입니다.

.ico_like {
    animation: heartbeat 1s infinite;
}

키프레임 추가하기

키프레임 heartbeat를 정의합니다. scale 함수를 통해 각 분기마다 크기가 조정되도록 합니다. 해당 키프레임을 통해 공감 버튼이 두근두근 하는 효과가 나타납니다.

애니메이션에서 주기를 1초로 설정하였으니 다음과 같이 무한히 반복합니다.
0% => 0초에 하트 크기가 75%
20% => 0.2초에 하트 크기 기본값 100%
40% => 0.4초에 다시 크기 75%
60% => 0.6초에 100% 크기
80% => 0.8초에 75% 크기로 줄어듭니다.
100% => 1초에도 여전히 75% 크기입니다. (애니메이션을 자세히 보시면 마지막 0.2초 가량이 하트가 줄어든 채로 가만히 있는 것을 확인할 수 있습니다.)

@keyframes heartbeat {
    0% {
        transform: scale( .75 );
    }
    20% {
        transform: scale( 1 );
    }
    40% {
        transform: scale( .75 );
    }
    60% {
        transform: scale( 1 );
    }
    80% {
        transform: scale( .75 );
    }
    100% {
        transform: scale( .75 );
    }
}