Creating a captivating animation for a social media like button with CSS

I came across some animation code on the web and noticed that when I click the image, it replays the animation from the starting point. I want to make it so that when I click the image, the animation plays and stops, and if clicked again, resets the image. Can anyone provide feedback on how to achieve this?

.like-btn-svg {
  width: 80px;
  height: 100px;
  position: absolute;
  left: 25px;
  bottom: -112px;
  transform: translate(-50%, -50%);
  background: url(https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png) no-repeat;
  background-position: 0 0;
  animation: fave-like-btn-svg 1s steps(28);
  cursor: pointer;
}

.like-btn-svg:hover {
  background-position: -2800px 0;
  transition: background 1s steps(28);
}

@keyframes fave-like-btn-svg {
  0% {
    background-position: 2800px 0;
  }
  100% {
    background-position: -2800px 0;
  }
}
<div class="like-btn-svg"></div>

javascriptjquerycsshtml

Answer №1

CSS and SVG Animation

svg {
  cursor: pointer;
  overflow: visible;
  width: 60px;
  margin: 20px;
}

svg #heart {
  transform-origin: center;
  animation: animateHeartOut .3s linear forwards;
}

svg #main-circ {
  transform-origin: 29.5px 29.5px;
}

.checkbox {
  display: none;
}

.checkbox:checked+label svg #heart {
  transform: scale(0.2);
  fill: #E2264D;
  animation: animateHeart .3s linear forwards .25s;
}
....
@keyframes animateHeartOut {
  0% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}
<input type="checkbox" class="checkbox" id="checkbox" />
<label for="checkbox">
      <svg id="heart-svg" viewBox="467 392 58 57" xmlns="http://www.w3.org/2000/svg">
        <g id="Group" fill="none" fill-rule="evenodd" transform="translate(467 392)">
          <path d="M29.144 20.773c-.063-.13-4.227-8.67-11.44-2.59C7.63 28.795 28.94 43.256 29.143 43.394c.204-.138 21.513-14.6 11.44-25.213-7.214-6.08-11.377 2.46-11.44 2.59z" id="heart" fill="#AAB8C2"/>
          <circle id="main-circ" fill="#E2264D" opacity="0" cx="29.5" cy="29.5" r="1.5"/>
....

Answer №2

If you're looking to add some animation to your webpage, using jQuery or plain JavaScript can help achieve that effect. Here is an example of how to toggle a class for animation:

$('.like-btn-svg').on('click', function () {
  $(this).toggleClass('animate');
});
.like-btn-svg {
  width: 80px;
  height: 100px;
  position: absolute;
  left: 25px;
  bottom: 0; /* temporary value */
  transform: translate(-50%, -50%);
  background: url(https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png) no-repeat;
  background-position: 0 0;
  cursor: pointer;
}

.like-btn-svg.animate {
  transition: background 1s steps(28);
  animation: fave-like-btn-svg 1s steps(28);
  background-position: -2800px 0;
}

@keyframes fave-like-btn-svg {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -2800px 0;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="like-btn-svg"></div>

Answer №3

Using only CSS:

.heart-animation {
  width: 80px;
  height: 100px;
  background: url(https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png) no-repeat;
  background-position: 0 0;
  cursor: pointer;
}

input[type="checkbox"] {
  display:none;
}

input:checked + .heart-animation{
  transition: background 1s steps(28);
  animation: heart-like-btn-animation 1s steps(28);
  background-position: -2800px 0;
}

@keyframes heart-like-btn-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -2800px 0;
  }
}
<label><input type="checkbox">
  <div class="heart-animation"></div>
</label>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The never-ending loading problem at the bottom of the Firefox screen seems

I am facing an issue while trying to open something in Firefox using window.open(). The loading screen seems to never stop, and I cannot pinpoint the reason behind it. Any advice on how to resolve this would be greatly appreciated. View Screenshot: This ...

javascriptcssbackbone.jsmarionette

The functionality of using multiple inputs with Google Places API is not functioning as expected

Having trouble with the Google Place API. I am unable to set up 2 input fields with autocomplete. The first input is populated from a payload received from the backend, while the second input is within a Bootstrap modal. I have tried various solutions fou ...

javascriptjquerygoogle-mapsgoogle-places-api

Adding text to an existing div element using jQuery and ensuring the div tag automatically adjusts its height according to the text length

I have attempted to implement the following code, but unfortunately, it is not functioning as expected. I am hopeful that someone can assist me. I am seeking a way for the div tag to dynamically increase its height based on the size of the text. Does any ...

javascriptjqueryhtmlcss

Purging the internal buffer of the node stream

Utilizing Node Serialport, I've implemented an event listener to check the data streaming through the connection for correct units. If the units don't match what the user has set, I utilize the .pause() method to pause the stream and inform the u ...

javascriptnode.jseventsserial-port

The code function appears to be malfunctioning within the Cordova platform

When working with Cordova, I encountered an issue where I needed to trigger a button event from a listener. In my app, I am loading a specific page . This page contains a button with the class name "btn", and I wanted to display an alert when that button i ...

javascriptjqueryasp.netcordovaphonegap

HTML form for selecting shipping method in PayPal

In my shopping cart setup, I offer two shipping methods: 'express' and 'standard'. I'm wondering if it's feasible to transmit this data to PayPal using HTML variables? ...

htmlformsvariablespaypal

Fulfill a pledge after a function has been run five times

I'm struggling to understand why my promise is not working as expected and how to resolve the issue. Here is the code snippet: let count = 0; function onLoad(){ count++ console.log(count); return new Promise((resolve) => { ...

javascript

Modifying the colors of my navigation links is not within my control

How can I modify my CSS to change the color of the navigation links to white? Below is the code snippet: <div class="col-sm-12"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header" ...

cssnavigationbar

Node.js tip: track down and address ignored errors in your code

Is there a method in node.js to track and log all exceptions? I find process.on('uncaughtException') insufficient for my needs, as I want to log all handled and unhandled exceptions, even if they were caught and disregarded using a catch block s ...

javascriptnode.js

Using jQuery flot to create various time charts

I'm trying to combine the visitor count data from this month (chart 1) and last month (chart 2) into a single chart using Flot. While I've successfully created chart 1, I'm facing challenges in overlaying it with chart 2 due to the x-axis pa ...

jqueryjsonflot

Determine the height of the left div, which is set to auto, and apply the same height to the right div, which has overflow set

I am facing an issue that needs a solution. I need to ensure that two div elements have the same height. The left div should have 'auto' height while the right one must match it. Moreover, the right div contains 14 nested divs that need to be scr ...

javascripthtmlcssheight

Using an anonymous function in Javascript to change the background color of a div on mouse-over directly from the HTML code

I came across this code snippet in the provided link and as a beginner in JavaScript, I am unsure how to call the JavaScript function from the HTML code. Due to them being anonymous functions, I am struggling to invoke them. Can someone guide me on how to ...

javascriptjqueryjquery-events

Creating a dynamic nested form in AngularJS by binding data to a model

Creating a nested form from a JSON object called formObject, I bind the values within the object itself. By recursively parsing the values, I extract the actual data, referred to as dataObject, upon submission. To view the dataObject in a linear format, r ...

javascriptangularjsmodel-view-controller

Using electron cookies in Angular involves integrating Electron's native cookie functionality into an

I am currently dealing with electron and looking to implement cookies conditionally in my project. If the application is built using electron, I want to utilize Electron Cookies; otherwise, I plan to use Angular Cookies. However, I'm encountering diff ...

javascriptnode.jsangularcookieselectron

Press a button to link a click event handler to another button

function example() {console.log('example');} $('#button1').click(function(){ $('#button2').onclick = example(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> ...

javascriptjquery

The onClick functionality of a button may not work properly when nested within a DIV element in an ASP.NET project

Here is a snippet of code that includes a <div> element: <div id="specific"> <table cellpadding="2" border="0"> <tr><td>Choose category</td><td><select id="list_categories" runat="server"></select>< ...

c#asp.nethtmlevent-handling

Attempting to import a npm module that is not defined

I recently released an npm package. It is working perfectly when accessed via the global variable window.Router in the browser, but I'm facing issues when trying to import it using ES modules in a Meteor application. It keeps returning undefined... ...

javascriptnode.jsmeteornpmwebpack

When working with Function components in NextJS, it's important to note that they cannot be assigned refs directly. If you're trying to access a ref within a Function component, you

I'm having an issue with wrapping a card component using the Link component from 'next/link'. Instead of redirecting me to the desired link when I click the card, I receive a warning that says 'Function components cannot be given refs. ...

javascriptreactjsnext.jsjsx

Using PHP code in CSS for the background styling

I'm having trouble with this line of CSS... background-image:url(upload/<?php echo $array['image']; ?>); It's not working properly, and all I see is a blank screen. The image exists in the database and on the server in the corre ...

phpcss

Anticipate feedback from a new user

I'm currently working on a verification system that involves sending a message in one channel and triggering an embed with two emoji options (accept or deny) in another channel. The issue I'm facing is that the .awaitReaction function is getting ...

javascriptnode.jsdiscord.js