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

Question

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>

javascript jquery css html

Answer 1

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

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 3

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 4

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 5

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>

Answer 6

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>

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

Answer №1

CSS and SVG Animation

Answer №2

Answer №3

Similar questions

Steps to assign a default value to the KeyboardTimePicker

Hover Effects on Facebook Tabs

Can display-inline-block support top margin and text alignment?

What is the best way to incorporate random colors from a preselected color palette within my JavaScript code?

What are the steps to create an endless scrolling feature?

Restricting or postponing HTTP requests in an AngularJS service

Tips for replacing div content using $.ajax similar to $.postWould you like to learn how

Looking for ways to locate encoded HTML values in chrome?

Master the art of using Insertion Sort in javascript with the help of Khan Academy

Get information that has been uploaded using ajax

Retrieve the names contained within TD elements using the console

What steps should I take to ensure that my dropdown menu functions properly?

"The power of Node JS in handling JSON data and gracefully

What is the approach taken by NextJS for ensuring the security of pages when attempting to access them directly in the browser

I'm curious as to why these two divs are positioned side by side. Can anyone shed some light on why this footer isn't functioning properly

Unable to upload file on ReactJS platform

Utilizing jQuery to apply CSS styling to the parent element

What is the best way to implement coding for portrait styles specifically on the Kindle Fire device?

Sharing package JSON file dependencies with child engines and addons in Ember.js

Invoke a JavaScript function once the div has finished loading