like animation

src/components/node/NodeImageSlideBlock/styles.scss

@@ -16,6 +16,7 @@
   position: relative;
   overflow: hidden;
   user-select: none;
+  will-change: transform, height;
 
   .image {
     max-height: 960px;

src/components/node/NodePanelInner/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
+import React, { FC } from 'react';
 import * as styles from './styles.scss';
 import { Group } from '~/components/containers/Group';
 import { Filler } from '~/components/containers/Filler';
@@ -17,7 +17,7 @@ interface IProps {
 }
 
 const NodePanelInner: FC<IProps> = ({
-  node: { title, user },
+  node: { title, user, is_liked },
   stack,
   can_edit,
   can_like,
@@ -41,8 +41,12 @@ const NodePanelInner: FC<IProps> = ({
             </div>
           )}
           {can_like && (
-            <div>
-              <Icon icon="heart" size={24} onClick={onLike} />
+            <div className={classNames(styles.like, { is_liked })}>
+              {is_liked ? (
+                <Icon icon="heart_full" size={24} onClick={onLike} />
+              ) : (
+                <Icon icon="heart" size={24} onClick={onLike} />
+              )}
             </div>
           )}
         </div>

src/components/node/NodePanelInner/styles.scss

@@ -124,3 +124,39 @@
 
 .sep {
 }
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+
+  45% {
+    transform: scale(1);
+  }
+
+  60% {
+    transform: scale(1.25);
+  }
+
+  75% {
+    transform: scale(1);
+  }
+
+  90% {
+    transform: scale(1.25);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+.like {
+  transition: fill, stroke 0.25s;
+  will-change: transform;
+
+  &:hover {
+    fill: $red;
+    animation: pulse 0.75s infinite;
+  }
+}