Heart animation - SCSS

heart-animation-icon.scss

//animation like - twitter opt1
.heart {
    width: 50px;
    height: 50px;
    background: url("https://cssanimation.rocks/images/posts/steps/heart.png") no-repeat;
    background-size: cover;
    background-position: 0 -7px;
    cursor: pointer;
    transition: background-position 1s steps(28);
    transition-duration: 0s;
    &.is-active {
      transition-duration: 1s;
      background-position: -1400px -7px;
    }
  }

//animation like - twitter opt2
 .heart2 {
    background-image: url(https://abs.twimg.com/a/1474649078/img/animations/web_heart_animation.png);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 2900%;
    cursor: pointer;
    display: block;
    width: 50px;
    height: 50px;
    
    &.on {
        animation: heartAnim 1s steps(28) forwards;
    }
    
    &:hover {
        background-position: right top;
    }
}

@keyframes heartAnim {
    from {
        background-position: left top;
    }
    to {
        background-position: right top;
    }
}