Twitter's new like animation

like_animation.scss

/* Twitter's new like animaton uses a background image sprite and a CSS animation
 *
 * They animate through [this sprite](http://i.imgur.com/UjuIJ4C.png) with the following CSS:
 */

@keyframes heart-burst {
    0% {
        background-position: left
    }
    100% {
        background-position: right
    }
}

.ProfileTweet-action--favorite.withHeartIcon.is-animating .HeartAnimation {
    animation-timing-function: steps(28)
}

.ProfileTweet-action--favorite.withHeartIcon.is-animating .HeartAnimation {
    display: inline-block;
    animation-name: heart-burst;
    animation-duration: .8s;
    animation-iteration-count: 1
}

Step easing functions: https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function#The_steps()_class_of_timing-functions