CSS Sprite Sheet Animations: Create the twitter’s heart button

Fabio Cortés, Creative developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
8 Videos (18m)
    • Intro

    • Setting up the HTML & CSS

    • Step function

    • Spritesheets

    • Animating the sprites

    • Adding user interaction

    • Adding retina display support

    • Final thoughts


About This Class

CSS has a little known timing function that let us break an animation into steps, instead of running from point A to Point B continuously. With this function, we can create spritesheet animations, displaying precisely each sprite as a “frame” without easing effects inbetween.

In this class, you will learn how to combine a spritesheet, a CSS animation, and the steps easing function to create beautiful animations, optimized for retina displays. The hands-on example for the class is the twitter's heart animation:


All you need is to be familiar with HTML, CSS and basic Javascript.

Let’s bring your UIs to life!

3 of 3 students recommendSee All

It's interesting to animate with click event, I was aware of hover direct in css but not that javascript possibility. Thanks for the class.
I already new how to do CSS animations but thanks to this class I also learned how to do step-frame animation (which I didn't know was even possible in CSS!). Great class thanks!
Manu De Mey

Webdesigner, 3D enthousiast, teacher





Fabio Cortés

Creative developer

Hey! I'm Fabio Cortes, I'm a Creative Developer, teacher and speaker.

Right now I'm mostly working with Node.js, Processing and Generative Art.

My passions are reading, running and music, specially Pantera! #CFH

See full profile