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

      0:25
    • Setting up the HTML & CSS

      4:16
    • Step function

      2:42
    • Spritesheets

      2:13
    • Animating the sprites

      3:07
    • Adding user interaction

      3:07
    • Adding retina display support

      1:31
    • Final thoughts

      1:06

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:

Project

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

11

Students

--

Projects

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