A CodePen by Seth Broweleit. Favorited Animation - Animation of items when favorited.

<div class='mycount-outer'>
    <b id="mycount">0</b>
  </div>
</header>
<ul>
  <li>
    <h2>A</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Aliquam tincidunt mauris eu risus.</p>
    <p>Vestibulum auctor dapibus neque.</p>
    <button>
      <span class='unfaved'>Add to favorites</span>
      <span class='faved'>In favorites</span>
    </button>
  </li>
  <li>
    <h2>B</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Aliquam tincidunt mauris eu risus.</p>
    <p>Vestibulum auctor dapibus neque.</p>
    <button>
      <span class='unfaved'>Add to favorites</span>
      <span class='faved'>In favorites</span>
    </button>
  </li>
  <li>
    <h2>C</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Aliquam tincidunt mauris eu risus.</p>
    <p>Vestibulum auctor dapibus neque.</p>
    <button>
      <span class='unfaved'>Add to favorites</span>
      <span class='faved'>In favorites</span>
    </button>
  </li>
  <li>
    <h2>D</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Aliquam tincidunt mauris eu risus.</p>
    <p>Vestibulum auctor dapibus neque.</p>
    <button>
      <span class='unfaved'>Add to favorites</span>
      <span class='faved'>In favorites</span>
    </button>
  </li>
  <li>
    <h2>E</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Aliquam tincidunt mauris eu risus.</p>
    <p>Vestibulum auctor dapibus neque.</p>
    <button>
      <span class='unfaved'>Add to favorites</span>
      <span class='faved'>In favorites</span>
    </button>
  </li>
  <li>
    <h2>F</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Aliquam tincidunt mauris eu risus.</p>
    <p>Vestibulum auctor dapibus neque.</p>
    <button>
      <span class='unfaved'>Add to favorites</span>
      <span class='faved'>In favorites</span>
    </button>
  </li>
    <li>
    <h2>G</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Aliquam tincidunt mauris eu risus.</p>
    <p>Vestibulum auctor dapibus neque.</p>
    <button>
      <span class='unfaved'>Add to favorites</span>
      <span class='faved'>In favorites</span>
    </button>
  </li>
    <li>
    <h2>H</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Aliquam tincidunt mauris eu risus.</p>
    <p>Vestibulum auctor dapibus neque.</p>
    <button>
      <span class='unfaved'>Add to favorites</span>
      <span class='faved'>In favorites</span>
    </button>
  </li>
    <li>
    <h2>I</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Aliquam tincidunt mauris eu risus.</p>
    <p>Vestibulum auctor dapibus neque.</p>
    <button>
      <span class='unfaved'>Add to favorites</span>
      <span class='faved'>In favorites</span>
    </button>
  </li>
    <li>
    <h2>J</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Aliquam tincidunt mauris eu risus.</p>
    <p>Vestibulum auctor dapibus neque.</p>
    <button>
      <span class='unfaved'>Add to favorites</span>
      <span class='faved'>In favorites</span>
    </button>
  </li>
    <li>
    <h2>K</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Aliquam tincidunt mauris eu risus.</p>
    <p>Vestibulum auctor dapibus neque.</p>
    <button>
      <span class='unfaved'>Add to favorites</span>
      <span class='faved'>In favorites</span>
    </button>
  </li>
    <li>
    <h2>L</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Aliquam tincidunt mauris eu risus.</p>
    <p>Vestibulum auctor dapibus neque.</p>
    <button>
      <span class='unfaved'>Add to favorites</span>
      <span class='faved'>In favorites</span>
    </button>
  </li>
  
  </ul>

</div>