いいねボタンをクリックしたときにアニメーションをつけたい

Question

Rubu on Railsでいいね機能を作ったのですがボタンを押したときにアニメーションをつけたいのですが、いろいろ調べてもよくわかりませんでした。
https://nelog.jp/twitters-fave-animation　や　https://yuyauver98.me/twitter-like-animation/ を見たのですがいいねにアニメーションを実装することはできませんでした（hoverでアニメーションを動作させることはできた）
詳しい方教えていただけると幸いです。

###index.html

<span id="likes_buttons_<%= post.id.to_s %>">
   <%= render partial: 'likes/like', locals: { post: post} %>
</span>

CSS

.love {
    background-image: image-url("likeoff");
    background-repeat: no-repeat;
    height: 18px;
    width: 18px;
    background-size: 18px !important;
    float: left;
    margin-top: 3px;
    transition: all .15s ease;
    animation: populate .5s ease-out normal backwards;
  }
  
  .love:hover {
    transform: scale(1.05);
  }
  .loved {
    background-image: image-url("likeon");
    background-repeat: no-repeat;
    height: 18px;
    width: 18px;
    background-size: 18px !important;
    float: left;
    margin-top: 3px;
  }

###_like.html.erb

<div class="like-area" id="like-icon-post-<%= post.id.to_s %>">
<% if post.liked_by(current_user).present? %>
  <%= link_to "いいねを取り消す", post_like_path(post.id, post.liked_by(current_user)), method: :DELETE, remote: true, class: "loved hide-text" %>
  <span class="like-count"><%= post.likes.count %></span>
<% else %>
  <%= link_to "いいね", post_likes_path(post), method: :POST, remote: true, class: "love hide-text" %>
  <span class="like-count"><%= post.likes.count %></span>
<% end %>
</div>

create.js.erb

$('#like-icon-post-<%= @post.id.to_s %>').
  html('<%= link_to "いいね", post_like_path(@post.id, @like), method: :DELETE, remote: true, class: "loved hide-text" %>');
$('#likes_buttons_<%= @post.id.to_s %>').html("<%= j(render partial: 'likes/like', locals: {post: @post}) %>");

###destroy.js.erb

$('#like-icon-post-<%= @post.id.to_s %>').
  html('<%= link_to "いいねを取り消す", post_likes_path(@post), method: :POST, remote: true, class: "love hide-text" %>');
$('#likes_buttons_<%= @post.id.to_s %>').html("<%= j(render partial: 'likes/like', locals: {post: @post}) %>");

Comments

[退会済みユーザー]

アニメーションと言っても沢山あります。

どの様なアニメーションを想定しているのかを明示しないと回答者は分かりませんよ。

[退会済みユーザー]

https://nelog.jp/twitters-fave-animation このサイトに乗っているTwitterのようなものです

Answer 1

こんにちは

（hoverでアニメーションを動作させることはできた）

擬似クラスhoverで作成した様なので、そこをクリックされたときに実行すれば言い訳です。よって、擬似クラスはactiveに変更すれば良いかと。

MDN: 擬似クラス active

CodePen: 動くサンプル

Comments

[退会済みユーザー]

activeにした場合クリック下瞬間一瞬アニメーションが流れるだけで長押しする必要が出てきます

[退会済みユーザー]

>activeにした場合クリック下瞬間一瞬アニメーションが流れるだけで長押しする必要が出てきます

どの様なものにしたいのかは、質問者さんにしか分かりません。
要件として、長押しする必要が出てこない様にしたいのであれば、明示するべきなのではないのでしょうか？

質問文を修正して補足情報等を明示してください。

[退会済みユーザー]

逆に長押しする必要があるいいねは世の中に存在するのでしょうか？

[退会済みユーザー]

>逆に長押しする必要があるいいね
長押しする必要があるいいねではなく、長押しなければアニメーションが実行されないいいねですよね。

[退会済みユーザー]

的外れな回答だったようですが、調べてみたところ以下のURLがおそらく質問者さんの要件に近いかと思います。
https://codepen.io/alextoudic/pen/EKMRZW