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

<div id='myapp'>

<header>

  <h1>app</h1>

​

  <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>